abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript隔行換色</title></head><style>body{width: 800px;margin: 50px auto;}table{width:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript隔行換色</title>
</head>
<style>
body{width: 800px;margin: 50px auto;}
table{
width: 800px;border: 1px solid #ccc;
border-collapse: collapse;
}
td{border: 1px solid #ccc;text-align: center;}
</style>
<body>
<table>
<thead>
<tr>
<td>
<label for="">全選<input type="checkbox" onclick="checkAll()" name="checkAll"></label>
<label for="">反選<input type="checkbox" onclick="checkOut()" name="checkOut"></label>
</td>
<td>標題</td>
<td>狀態(tài)</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標題1</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標題2</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標題3</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標題4</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標題5</td>
<td>已讀</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 隔行換色
function bgColor(){
var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
// document.getElementsByTagName('tbody')是一個數(shù)組，要取其第一個值中tr,所以要加[0]
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 lists=document.getElementsByName('list')
// 獲取到全選按鈕document.getElementsByName('checkAll')，但是這個數(shù)組只有一個數(shù)據(jù)，所以后面加上[0]
var checkall=document.getElementsByName('checkAll')[0]
for(var i=0;i<lists.length;i++){
// 判斷全選按鈕是否處于選中狀態(tài)
if(checkall.checked==true){
// 如果點擊了全選按鈕則改變每一個選擇按鈕為全選
lists[i].checked=true;
}else{
// 點擊全選按鈕取消全選時，所有選項變?yōu)槲催x中狀態(tài)
lists[i].checked=false;
}
}
}
// 全選中去掉一個時，全選按鈕也取消掉
function doCheckAll(){
var lists=document.getElementsByName('list')
var checkeds=0
for(var i=0;i<lists.length;i++){
// 判斷全選按鈕是否處于選中狀態(tài)
if(lists[i].checked==true){
// 如果點擊了全選按鈕則改變每一個選擇按鈕為全選
checkeds++
}
}
if(lists.length==checkeds){
document.getElementsByName('checkAll')[0].checked=true
}else{
document.getElementsByName('checkAll')[0].checked=false
}
}
// 反選
function checkOut(){
var lists=document.getElementsByName('list')
// 獲取到全選按鈕document.getElementsByName('checkAll')，但是這個數(shù)組只有一個數(shù)據(jù)，所以后面加上[0]
var checkout=document.getElementsByName('checkOut')[0]
for(var i=0;i<lists.length;i++){
// 判斷全選按鈕是否處于選中狀態(tài)
if(checkout.checked==true){
// 如果點擊了全選按鈕則改變每一個選項的選中狀態(tài)
var temp=lists[i].checked
lists[i].checked=!temp;
}else{
// 點擊取消反選按鈕，再一次改變選項選中狀態(tài)，復原到初始狀態(tài)
var temp=lists[i].checked
lists[i].checked=!temp;
}
}
doCheckAll()
}
</script>
</body>
</html>