摘要：<!DOCTYPE html> <html> <head> <title>js隔行換色與全選和反選</title> <style type="text/css"> div{ margin: 100px auto; width: 600px
<!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>狀態(tài)</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++){
//判斷當前選擇框是否為選中狀態(tài)?;
if(objList[i].checked){
objList[i].checked=false;
}else{
objList[i].checked=true;
}
}
}
</script>
</body>
</html>總結(jié):
批改老師：查無此人批改時間：2019-04-01 10:01:56
老師總結(jié)：完成的不錯。全選還可以用在后臺管理列表里。繼續(xù)加油。