实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机色+全选</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration: none;}
table{
width: 500px;
border: 1px solid #d6a2c6;
margin:100px auto;
text-align: center;
border-collapse: collapse;
}
th,td{
border: 1px solid #d6a2c6;
}
tr{
height: 50px;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th><input type="checkbox" name="lister" onclick="checkAll()">全选</th>
<th>标题</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list"></td>
<td>邮件</td>
<td><a href="#">未读</a></td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>邮件</td>
<td><a href="#">未读</a></td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>邮件</td>
<td><a href="#">未读</a></td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>邮件</td>
<td><a href="#">未读</a></td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>邮件</td>
<td><a href="#">未读</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
function checkAll()
{
var obj = document.getElementsByName("list");
var obj_1 = document.getElementsByName("lister");
for(var key in obj)
{
if(obj_1[0].checked)
{
obj[key].checked = true;
}else
{
obj[key].checked = false;
}
}
}
function beijingColor()
{
var bg = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
// document.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
for(var i=0;i<bg.length;i++)
{
if(i % 2)
{
bg[i].style.background = "#93DD43";
}else
{
bg[i].style.background = "#66D9D0";
}
}
}
beijingColor();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例