<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的隔行换色</title> <script> //隔行换色 function init(){ //得到表格 var tab=document.getElementById("tab"); //动态操作每一行，得到表格中的每一行 var rows=tab.rows;//得到所有的行,是一个对象。此处是对象 //遍历所有的行 for(var i=0;i<rows.length;i++) { var row=rows[i]; if(i%2==0) row.bgColor="red"; else row.bgColor='yellow'; } } //全选和全不选 function checkAll(){ var check1=document.getElementById("check1"); //得到当前check1的状态 var checked=check1.checked; var checks=document.getElementsByTagName("input");//不建议这样做 for (var i=1;i<checks.length;i++) { var checkchoose=checks[i]; checkchoose.checked=checked; } } </script> </head> <body onload="init()"> <table border="2px solid" align="center" style=" 60%;height: 50%;"id="tab"> <tr> <td><input type="checkbox" name="input" id="check1" onclick="checkAll()">全选</td> <td>姓名</td> <td>年龄</td> <td>专业</td> </tr> <tr> <td><input type="checkbox" name="input">num1</td> <td>zyz</td> <td>21</td> <td>计算机</td> </tr> <tr> <td><input type="checkbox" name="input">num2</td> <td>wj</td> <td>20</td> <td>金融</td> </tr> <tr> <td><input type="checkbox" name="input">num3</td> <td>xjh</td> <td>19</td> <td>机械</td> </tr> <tr> <td><input type="checkbox" name="input">num4</td> <td>spc</td> <td>21</td> <td>计算机</td> </tr> </table> </body> </html>