摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> table{ border: 1px solid black; text-align: center; width:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border: 1px solid black;
text-align: center;
width: 500px;
margin: 0 auto;
}
table thead tr td{
border: 1px solid black;
background: #FFFF00;
}
table tbody tr td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td><input type="checkbox" onclick="changes(this.checked)" id="head" />全選</td>
<td>編號(hào)</td>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>001</td>
<td>佐菲</td>
<td>100</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>002</td>
<td>初代</td>
<td>99</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>003</td>
<td>賽文</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>004</td>
<td>艾斯</td>
<td>77</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>005</td>
<td>杰克</td>
<td>66</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>006</td>
<td>泰羅</td>
<td>55</td>
</tr>
<tr>
<td><input type="checkbox" name="checkone"/></td>
<td>007</td>
<td>雷歐</td>
<td>44</td>
</tr>
</tbody>
</table>
</body>
<script>
//獲取所有行
var tbody=document.getElementsByTagName("tbody")
for (var i=0;i<tbody[0].rows.length;i++) {
if(i%2==0){
tbody[0].rows[i].style.backgroundColor="pink";
}else{
tbody[0].rows[i].style.backgroundColor="red";
}
}
function changes(checks){
//獲取全選框的狀態(tài)
var checkones=document.getElementsByName("checkone");
if(checks==true){
for (var a=0;a<checkones.length;a++) {
checkones[a].setAttribute("checked","checked");
}
}else{
for (var a=0;a<checkones.length;a++) {
checkones[a].removeAttribute("checked");
}
}
}
</script>
批改老師：查無(wú)此人批改時(shí)間：2019-06-05 09:28:31
老師總結(jié)：完成的不錯(cuò)。js功能非常強(qiáng)大，要好好練習(xí)。繼續(xù)加油。