使用JavaScript实现表格隔行换色

完整代码:

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>JS实现表单隔行换色</title>
 7 
 8         <script>
 9             //onload页面加载事件
10             function show()
11             {
12                 //获取tbody标签的行数
13                 var len = document.getElementById("tb1").tBodies[0].rows.length;
14                 //for循环遍历行数,实现奇偶行数变色
15                 for(var i = 0; i < len; i++) 
16                 {
17                     if(i % 2 == 0) 
18                     {
19                         document.getElementById("tb1").tBodies[0].rows[i].style.backgroundColor = "gold";
20                     } else 
21                     {
22                         document.getElementById("tb1").tBodies[0].rows[i].style.backgroundColor = "white";
23                     }
24                 }
25             }
26         </script>
27     </head>
28 
29     <body onload="show()">
30         <table border="1px" width="500px" align="center" id="tb1">
31             <thead>
32                 <tr>
33                     <th>编号</th>
34                     <th>姓名</th>
35                     <th>性别</th>
36                 </tr>
37             </thead>
38             <tbody>
39                 <tr>
40                     <td>1001</td>
41                     <td>张三</td>
42                     <td></td>
43                 </tr>
44                 <tr>
45                     <td>1002</td>
46                     <td>李四</td>
47                     <td></td>
48                 </tr>
49                 <tr>
50                     <td>1003</td>
51                     <td>王五</td>
52                     <td></td>
53                 </tr>
54                 <tr>
55                     <td>1004</td>
56                     <td>赵六</td>
57                     <td></td>
58                 </tr>
59                 <tr>
60                     <td>1005</td>
61                     <td>某七</td>
62                     <td></td>
63                 </tr>
64                 <tr>
65                     <td>1005</td>
66                     <td>某八</td>
67                     <td></td>
68                 </tr>
69             </tbody>
70         </table>
71     </body>
72 </html>
View Code

猜你喜欢

转载自www.cnblogs.com/smileL/p/8986208.html
今日推荐