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