表格隔行换色及删除后仍隔行换色效果(好别扭的标题。。。)


表格隔行换色,有多种写法,可以通过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>

 

记录下每天的积累,超越昨天的自己。

关注微信公众号

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com