原生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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM