码迷,mamicode.com
首页 > Web开发 > 详细

原生JS实现表格的隔行换色

时间:2018-07-02 10:52:33      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:height   get   实现   ble   onload   style   back   开始   TE   

步骤如下:

1、利用getid获取到表格的id

2、获取到表格的行数

3、利用一个循环遍历行数,用if条件判断奇偶,用.style.backgroundColor="颜色"设置颜色

完成

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表格隔行换色功能</title>
 6         <script type="text/javascript">
 7             window.onload = function(){
 8                 //1、获取表格
 9                 var tab = document.getElementById("tal");
10                 //2、获取表格中tbody的行数
11                 var len = tab.tBodies[0].rows.length
12 //                alert(len)
13                 //3、开始循环,设置颜色
14                 for(var i = 0;i<len;i++){
15                     if(i%2==0){
16                         tab.tBodies[0].rows[i].style.backgroundColor= "red";
17                     }else{
18                         tab.tBodies[0].rows[i].style.backgroundColor = "green";
19                     }
20                 }
21             }
22         </script>
23     </head>
24     <body>
25         <table border="1px" width="500px"height="50px"align="center"id="tal">
26             <thead>
27                 <tr>
28                     <th>编号</th>
29                     <th>姓名</th>
30                     <th>年龄</th>
31                 </tr>
32             </thead>
33             <tbody>
34                 <tr>
35                     <td>1</td>
36                     <td>张三</td>
37                     <td>17</td>
38                 </tr>
39                 <tr>
40                     <td>2</td>
41                     <td>李四</td>
42                     <td>18</td>
43                 </tr>
44                 <tr>
45                     <td>3</td>
46                     <td>王五</td>
47                     <td>19</td>
48                 </tr>
49                 <tr>
50                     <td>4</td>
51                     <td>赵六</td>
52                     <td>20</td>
53                 </tr>
54                 <tr>
55                     <td>5</td>
56                     <td>田七</td>
57                     <td>21</td>
58                 </tr>
59                 <tr>
60                     <td>6</td>
61                     <td>庄八</td>
62                     <td>28</td>
63                 </tr>
64             </tbody>
65         </table>
66     </body>
67 </html>

 

原生JS实现表格的隔行换色

标签:height   get   实现   ble   onload   style   back   开始   TE   

原文地址:https://www.cnblogs.com/baiyiduren/p/9252017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!