<!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="width: 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>