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

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

 

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

你可能感兴趣的:(删除)