abstract：找準(zhǔn)元素，被對其進行操作，明白原理，按部就班的操作就可以了；<!DOCTYPE html><html><head> <title>javascript學(xué)習(xí)-隔行換色</title> <meta charset="utf-8"> <!-- <script type="text/javas
找準(zhǔn)元素，被對其進行操作，明白原理，按部就班的操作就可以了；
<!DOCTYPE html>
<html>
<head>
<title>javascript學(xué)習(xí)-隔行換色</title>
<meta charset="utf-8">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<style type="text/css">
div{
margin: 20px auto;
width: 800px;
}
table{
width: 800px;
border: 1px solid #ccc;
border-collapse: collapse;
}
td{
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body >
<div>
<p>
<button onclick="checkAll()" >全選</button>
<button onclick="checkRe()" >反選</button>
</p>
<table>
<thead>
<tr>
<th colspan="2">標(biāo)題</th>
<th>狀態(tài)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是標(biāo)題二</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是標(biāo)題三</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是標(biāo)題四</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是標(biāo)題五</td>
<td>已讀</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//隔行換色
function bgColor(){
var trList=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trList.length; i++) {
if (i%2) {
trList[i].style.background="#D0D8E8";
}else{
trList[i].style.background="#f2f2f2";
}
}
}
bgColor();
//全選
function checkAll(){
var objList=document.getElementsByName('list');
for (var i = 0; i < objList.length; i++) {
objList[i].checked=true;
}
}
// 反選
//可以用ByName來選擇input的名字list，也可以用ByTagName來選擇input
function checkRe(){
var objList=document.getElementsByName('list');
for (var i = 0; i < objList.length; i++) {
if(objList[i].checked){
objList[i].checked=false;
}else{
objList[i].checked=true;
}
}
}
</script>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-05-23 13:19:44
Teacher's summary：完成的不錯。如果是商城的購物車，全選還要統(tǒng)計商品總價。繼續(xù)加油。