首页 > 代码库 > 表格隔行换色及删除后仍隔行换色效果（好别扭的标题。。。）
表格隔行换色及删除后仍隔行换色效果（好别扭的标题。。。）
表格隔行换色，有多种写法，可以通过jquery来写，也可以用css3实现。
1.jquery方法
odd,奇数；even，偶数
方法很简单
$("tr:odd").css({background:"#c66",color:"#fff"});
$(‘tr:even‘).css({background:"#fff",color:"#333"});
但是如果删除后，两个一样背景的tr会挨上，怎么解决呢？可以将换行写到一个方法里，在删除事件中，调用换行方法，代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html charset=utf-8" /> 5 <title>模拟滚动条</title> 6 </head> 7 <style type="text/css"> 8 *{padding: 0;margin: 0;border:0;} 9 table{width: 600px;margin: 20px auto;border:1px solid #c66;border-collapse:collapse;}10 tr{text-align: center;height: 30px;border:0;}11 12 </style>13 <body>14 <table border="0">15 <thead>16 <th>姓名</th>17 <th>年龄</th>18 <th>昵称</th>19 <th>工作</th>20 <th>操作</th>21 </thead>22 <tbody>23 <tr>24 <td>silence</td>25 <td>20</td>26 <td>ss</td>27 <td>web</td>28 <td><a href="#">删除</a></td>29 </tr>30 <tr>31 <td>seraph</td>32 <td>21</td>33 <td>se</td>34 <td>web</td>35 <td><a href="#">删除</a></td>36 </tr>37 <tr>38 <td>rain</td>39 <td>22</td>40 <td>rr</td>41 <td>java</td>42 <td><a href="#">删除</a></td>43 </tr>44 <tr>45 <td>snow</td>46 <td>21</td>47 <td>sn</td>48 <td>asp</td>49 <td><a href="#">删除</a></td>50 </tr>51 <tr>52 <td>cloud</td>53 <td>18</td>54 <td>cc</td>55 <td>web</td>56 <td><a href="#">删除</a></td>57 </tr>58 <tr>59 <td>winter</td>60 <td>25</td>61 <td>win</td>62 <td>jsp</td>63 <td><a href="#">删除</a></td>64 </tr>65 </tbody>66 </table>67 <script src="jquery-1.8.3.min.js"></script>68 <script type="text/javascript">69 function changeColor(){70 $("tr:odd").css({background:"#c66",color:"#fff"});71 $(‘tr:even‘).css({background:"#fff",color:"#333"});72 };73 var color;74 $("tr").hover(function(){75 color=$(this).css(‘background-color‘);76 $(this).css(‘background‘,‘#ccc‘);77 },function(){78 $(this).css(‘background‘,color);79 })80 $(‘tr td a‘).live(‘click‘,function(e){81 82 $(this).parent().parent().remove();83 changeColor();84 });85 $(function(){86 changeColor();87 })88 89 </script>90 </body>91 </html>
2.css3方法
用到nth-of-type方法，nth-of-type(n)选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.
具体代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html charset=utf-8" /> 5 <title>模拟滚动条</title> 6 </head> 7 <style type="text/css"> 8 *{padding: 0;margin: 0;border:0;} 9 table{width: 600px;margin: 20px auto;border:1px solid #c66;border-collapse:collapse;}10 tr{text-align: center;height: 30px;border:0;}11 tbody tr:nth-of-type(odd){background:#c66;color:#fff; }12 tbody tr:nth-of-type(even){background:#fff;color:#333; }13 </style>14 <body>15 <table border="0">16 <thead>17 <th>姓名</th>18 <th>年龄</th>19 <th>昵称</th>20 <th>工作</th>21 <th>操作</th>22 </thead>23 <tbody>24 <tr>25 <td>silence</td>26 <td>20</td>27 <td>ss</td>28 <td>web</td>29 <td><a href="#">删除</a></td>30 </tr>31 <tr>32 <td>seraph</td>33 <td>21</td>34 <td>se</td>35 <td>web</td>36 <td><a href="#">删除</a></td>37 </tr>38 <tr>39 <td>rain</td>40 <td>22</td>41 <td>rr</td>42 <td>java</td>43 <td><a href="#">删除</a></td>44 </tr>45 <tr>46 <td>snow</td>47 <td>21</td>48 <td>sn</td>49 <td>asp</td>50 <td><a href="#">删除</a></td>51 </tr>52 <tr>53 <td>cloud</td>54 <td>18</td>55 <td>cc</td>56 <td>web</td>57 <td><a href="#">删除</a></td>58 </tr>59 <tr>60 <td>winter</td>61 <td>25</td>62 <td>win</td>63 <td>jsp</td>64 <td><a href="#">删除</a></td>65 </tr>66 </tbody>67 </table>68 <script src="jquery-1.8.3.min.js"></script>69 <script type="text/javascript">70 var color;71 $("tr").hover(function(){72 color=$(this).css(‘background-color‘);73 $(this).css(‘background‘,‘#ccc‘);74 },function(){75 $(this).css(‘background‘,color);76 })77 $(‘tr td a‘).live(‘click‘,function(e){78 $(this).parent().parent().remove();79 $(‘tbody tr:nth-of-type(odd)‘).css({background:‘#c66‘,color:‘#fff‘});80 $(‘tbody tr:nth-of-type(even)‘).css({background:‘#fff‘,color:‘#333‘});81 });82 </script>83 </body>84 </html>
记录下每天的积累，超越昨天的自己。
表格隔行换色及删除后仍隔行换色效果（好别扭的标题。。。）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。