隔行换色并且鼠标指向行变色的表格

一 应用

对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。

 

二 代码

Js代码  

1. <script language="javascript" src="JS/jquery-3.1.1.min.js"></script>  
2. <style type="text/css">  
3. table{ border:0;border-collapse:collapse;}                /*设置表格整体样式*/  
4. td{font:normal 12px/17px Arial;padding:2px;width:100px;}  /*设置单元格的样式*/  
5.    
6. th{  /*设置表头的样式*/  
7.       font:bold 12px/17px Arial;  
8.       text-align:left;  
9.       padding:4px;  
10.       border-bottom:1px solid #333;  
11. }  
12. .odd{background:#cef;}       /*设置奇数行样式*/  
13. .even{background:#ffc;}      /*设置偶数行样式*/  
14. .light{background:#00A1DA;}  /*设置鼠标移到行的样式*/  
15. </style>  
16. <table>  
17.   <thead>  
18.     <tr>  
19.       <th>产品名称</th>  
20.       <th>产地</th>  
21.       <th>厂商</th>  
22.     </tr>  
23.   </thead>  
24.   <tbody>  
25.     <tr>  
26.       <td>爱美电视机</td>  
27.       <td>福州</td>  
28.       <td>爱美电子</td>  
29.     </tr>  
30.     <tr>  
31.       <td>爱美洗衣机</td>  
32.       <td>福州</td>  
33.       <td>爱美电子</td>  
34.     </tr>  
35.     <tr>  
36.       <td>爱美冰箱</td>  
37.       <td>福州</td>  
38.       <td>爱美电子</td>  
39.     </tr>  
40.     <tr>  
41.       <td>爱美空调</td>  
42.       <td>福州</td>  
43.       <td>爱美电子</td>  
44.     </tr>   
45.   </tbody>  
46. </table>  
47. <script type="text/javascript">  
48. $(document).ready(function(){  
49.   $("tbody tr:even").addClass("odd");                    //为偶数行添加样式  
50.   $("tbody tr:odd").addClass("even");                     //为奇数行添加样式  
51.   $("tbody tr").hover(                                   //为表格主体每行绑定hover方法  
52.         function() {$(this).addClass("light");},  
53.         function() {$(this).removeClass("light");}  
54.   );  
55. });  
56. </script>  

 

 

三 运行效果

 

 

四 运行说明

:even用于获取索引值为偶数的元素，:odd用于获取索引值为奇数的元素。

之前部分原文：http://blog.csdn.net/itmyhome1990/article/details/30249579

一、隔行换色

[javascript]  view plain  copy

1. $("tr:odd").css("background-color","#eeeeee");  
2. $("tr:even").css("background-color","#ffffff");  

或者一行搞定：

[javascript]  view plain  copy

1. $("table tr:nth-child(odd)").css("background-color","#eeeeee");  

:nth-child 匹配其父元素下的第N个子或奇偶元素

二、鼠标经过变色

[javascript]  view plain  copy

1. $("tr").live({  
2.     mouseover:function(){  
3.         $(this).css("background-color","#eeeeee");  
4.     },  
5.     mouseout:function(){  
6.         $(this).css("background-color","#ffffff");  
7.     }  
8. })  

或者

[javascript]  view plain  copy

1. $("tr").bind("mouseover",function(){  
2.     $(this).css("background-color","#eeeeee");  
3. })  
4. $("tr").bind("mouseout",function(){  
5.     $(this).css("background-color","#ffffff");  
6. })  

当然live()和bind()都可以同时绑定多个事件或分开。

如果table表格是动态添加的 请参阅：http://blog.csdn.net/itmyhome1990/article/details/30245973

上面部分原文：http://cakin24.iteye.com/blog/2366747