abstract:<!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>编号</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){
//获取全选框的状态
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>
Correcting teacher:查无此人Correction time:2019-06-05 09:28:31
Teacher's summary:完成的不错。js功能非常强大,要好好练习。继续加油。