实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0}
/*.main{margin:100px auto;width: 800px}
table{border: 1px solid #ccc;border-collapse: collapse;width: 100%}
td:{width: 800px; border: 1px solid #ccc;text-align: center;}*/
.main{width:800px;margin:50px auto;}
table{
width:100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
td{
width:800px;border: 1px solid #ccc;
text-align: center;
line-height: 40px;
}
th{
width:800px;border: 1px solid #ccc;
text-align: center;
}
</style>
<!-- <script type="text/javascript" src="static/js/jquery.js">
</script> -->
</head>
<body>
<div class="main">
<table class="select">
<caption>文章列表</caption>
<thead>
<tr>
<th><input type="checkbox" onclick="checkAll()">全选</th>
<th>文章标题</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章标题1</td>
<td>文章状态1</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章标题2</td>
<td>文章状态2</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章标题3</td>
<td>文章状态3</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章标题4</td>
<td>文章状态4</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>文章标题5</td>
<td>文章状态5</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function bgColor(){
var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for(var k=0;k<trlist.length;k++){
if(k%2==0){
trlist[k].style.background='#ccc';
}else{
// trlist[k].style.background='red';
}
}
}
bgColor();
function checkAll(){
var objList=document.getElementsByName('list');
console.log("objList="+objList.length);
var count=0;
for(var i=0;i<objList.length;i++){
if(objList[i].checked){
count++;
}else{
console.log(i+':未执行！')
objList[i].checked=true;
}
}
console.log(i);
console.log(count);
if(count==objList.length){
for(var j=0;j<objList.length;j++){
objList[j].checked=false
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
心得：
操作中出了2个BUG
1、表格实现隔行换色，但是一直只在表头中出现要的颜色，与之前课堂上做的案例不同
在控制台中发现网页代码有两个tbody
后来发现是因为表格中标题caption放的位置不对，把cation放在thead前即可
2、实现单独全选功能，一直无法实现全部选择
利用console.log发现功能当已经全选后取消全选勾选的功能未实现
检查代码发现是一个if判断中条件数值比较只写了一个=。数值对比要用到==或===
