标签：style blog http io color ar sp java div
表格隔行换色，有多种写法，可以通过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>
记录下每天的积累，超越昨天的自己。
标签：style blog http io color ar sp java div
原文地址：http://www.cnblogs.com/MissBean/p/4103503.html
