表格隔行换色，有多种写法，可以通过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>
记录下每天的积累，超越昨天的自己。
时间： 2024-10-05 09:47:22