摘要：<!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>標(biāo)題</td>
<td>狀態(tài)</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標(biāo)題1</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標(biāo)題2</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標(biāo)題3</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標(biāo)題4</td>
<td>已讀</td>
</tr>
<tr>
<td><input type="checkbox" name="list" onclick="doCheckAll()"></td>
<td>標(biāo)題5</td>
<td>已讀</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 隔行換色
function bgColor(){
var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
// document.getElementsByTagName('tbody')是一個(gè)數(shù)組，要取其第一個(gè)值中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')，但是這個(gè)數(shù)組只有一個(gè)數(shù)據(jù)，所以后面加上[0]
var checkall=document.getElementsByName('checkAll')[0]
for(var i=0;i<lists.length;i++){
// 判斷全選按鈕是否處于選中狀態(tài)
if(checkall.checked==true){
// 如果點(diǎn)擊了全選按鈕則改變每一個(gè)選擇按鈕為全選
lists[i].checked=true;
}else{
// 點(diǎn)擊全選按鈕取消全選時(shí)，所有選項(xiàng)變?yōu)槲催x中狀態(tài)
lists[i].checked=false;
}
}
}
// 全選中去掉一個(gè)時(shí)，全選按鈕也取消掉
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){
// 如果點(diǎn)擊了全選按鈕則改變每一個(gè)選擇按鈕為全選
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')，但是這個(gè)數(shù)組只有一個(gè)數(shù)據(jù)，所以后面加上[0]
var checkout=document.getElementsByName('checkOut')[0]
for(var i=0;i<lists.length;i++){
// 判斷全選按鈕是否處于選中狀態(tài)
if(checkout.checked==true){
// 如果點(diǎn)擊了全選按鈕則改變每一個(gè)選項(xiàng)的選中狀態(tài)
var temp=lists[i].checked
lists[i].checked=!temp;
}else{
// 點(diǎn)擊取消反選按鈕，再一次改變選項(xiàng)選中狀態(tài)，復(fù)原到初始狀態(tài)
var temp=lists[i].checked
lists[i].checked=!temp;
}
}
doCheckAll()
}
</script>
</body>
</html>