js隔行换色与全选和反选
<!DOCTYPE html>
<html>
<head>
<title>js隔行换色与全选和反选</title>
<style type="text/css">
div{
margin: 100px auto;
width: 600px;
height: 300px;
background: #ccc;
}
table{
width: 600px;
border: 1px solid green;
border-collapse: collapse;
}
td{
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<table >
<tr>
<th width="120px;"><input onclick="chackAll()" type="checkbox" name="">全选</th>
<th>标题</th>
<th>状态</th>
</tr>
<tbody id="body_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>
<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>
<p>
<button onclick="chackAll()">全选</button>
<button onclick="chackOut()">反选</button>
</p>
</div>
<script type="text/javascript">
//隔行换色;
function bgColor(){
//找到所有的tr;
var trList= document.getElementById('body_tr').getElementsByTagName('tr');
for(var i=0;i<trList.length;i++){
if (i%2==0) {
trList[i].style.background = "red";
}else{
trList[i].style.background = "green";
}
}
}
bgColor();
// 点击全选事件;
function chackAll(){
//找到所有的input选择框;
var objList = document.getElementsByTagName('input');
// 遍历得到他的长度;
for(var i=0;i<objList.length;i++){
objList[i].checked=true;
}
}
// 点击反选事件;
function chackOut(){
//找到所有的input选择框;
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>总结: