步驟如下:
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>