08-JS中table隔行换色

JS中table隔行换色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <table id="tab1" border="" cellspacing="" cellpadding="" width="40%">
 9         <thead>
10             <tr>
11                 <td>ID</td>
12                 <td>姓名</td>
13                 <td>年龄</td>
14             </tr>
15         </thead>
16         <tbody>
17             <tr>
18                 <td>1</td>
19                 <td>张三</td>
20                 <td>27</td>
21             </tr>
22             <tr>
23                 <td>2</td>
24                 <td>李四</td>
25                 <td>20</td>
26             </tr>
27             <tr>
28                 <td>3</td>
29                 <td>张可爱</td>
30                 <td>29</td>
31             </tr>
32             <tr>
33                 <td>4</td>
34                 <td>李XX</td>
35                 <td>24</td>
36             </tr>
37             <tr>
38                 <td>5</td>
39                 <td>马小关</td>
40                 <td>35</td>
41             </tr>
42         </tbody>    
43         </table>
44     </body>
45     <script type="text/javascript">
46         window.onload = function(){
47             
48             var oTab = document.getElementById("tab1");
49             var oldColor = "";
50             //鼠标移到单元格上变色
51             for(var i=0;i<oTab.tBodies[0].rows.length;i++){
52                 
53                 oTab.tBodies[0].rows[i].onmouseover=function(){
54                     oldColor = this.style.background;
55                     this.style.background = "yellow";    
56                 }
57                 
58                 oTab.tBodies[0].rows[i].onmouseout=function(){
59                     this.style.background = oldColor;    
60                 }
61                 
62                 //实现各行换色
63                 if(i%2==0){
64                     oTab.tBodies[0].rows[i].style.background = "#ccc";
65                 }else{
66                     oTab.tBodies[0].rows[i].style.background = "";
67                 }
68                 
69             }
70         }
71     </script>
72 </html>