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

Posted 2020-11-21 baiyiduren

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现表格的隔行换色相关的知识，希望对你有一定的参考价值。

步骤如下：

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实现表格的隔行换色的主要内容，如果未能解决你的问题，请参考以下文章

JQuery案例一：实现表格隔行换色

jQuery实现的table表格隔行换色代码实例