摘要：找准元素，被对其进行操作，明白原理，按部就班的操作就可以了；<!DOCTYPE html><html><head> <title>javascript学习-隔行换色</title> <meta charset="utf-8"> <!-- <script type="text/javas
找准元素，被对其进行操作，明白原理，按部就班的操作就可以了；
<!DOCTYPE html>
<html>
<head>
<title>javascript学习-隔行换色</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">标题</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是标题二</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是标题三</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是标题四</td>
<td>已读</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>我是标题五</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>
批改老师：查无此人批改时间：2019-05-23 13:19:44
老师总结：完成的不错。如果是商城的购物车，全选还要统计商品总价。继续加油。
