完整代码
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 //获取tbody标签的行数 12 var len = document.getElementById("tb1").tBodies[0].rows.length; 13 //for循环遍历行数，实现奇偶行数变色 14 for(var i = 0; i < len; i++) { 15 if(i % 2 == 0) { 16 document.getElementById("tb1").tBodies[0].rows[i].style.backgroundColor = "gold"; 17 } else { 18 document.getElementById("tb1").tBodies[0].rows[i].style.backgroundColor = "white"; 19 } 20 } 21 } 22 </script> 23 </head> 24 25 <body onload="show()"> 26 <!--逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！--> 27 <table border="1px" width="500px" align="center" id="tb1"> 28 <thead> 29 <tr> 30 <th>编号</th> 31 <th>姓名</th> 32 <th>性别</th> 33 </tr> 34 </thead> 35 <tbody> 36 <tr> 37 <td>1001</td> 38 <td>张三</td> 39 <td>男</td> 40 </tr> 41 <tr> 42 <td>1002</td> 43 <td>李四</td> 44 <td>男</td> 45 </tr> 46 <tr> 47 <td>1003</td> 48 <td>王五</td> 49 <td>男</td> 50 </tr> 51 <tr> 52 <td>1004</td> 53 <td>赵六</td> 54 <td>女</td> 55 </tr> 56 <tr> 57 <td>1005</td> 58 <td>某七</td> 59 <td>女</td> 60 </tr> 61 <tr> 62 <td>1005</td> 63 <td>某八</td> 64 <td>男</td> 65 </tr> 66 </tbody> 67 </table> 68 </body> 69 </html>