<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:5px;
}
table th{
border:#249bdb 1px solid;
padding:5px;
background-color: rgb(200,200,200);
}
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#ef7125;
}
</style>
<script type="text/javascript">
//行颜色间隔显示功能。
var name;
function trColor(){
//1,获取表格对象。
var oTabNode = document.getElementById("mailtable");
//2,获取行对象。
var collTrNodes = oTabNode.rows;
//3,对所有需要设置背景的行对象进行遍历。
for(var x=1; x<collTrNodes.length-1;x++){
if(x%2==1){
collTrNodes[x].className = "one";
}else{
collTrNodes[x].className = "two";
}
collTrNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function(){
this.className = name;
}
}
}
onload = function(){
trColor();
}
//复选框的全选动作。
function checkAll(node){
//获取所有的mail复选框。
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
collMailNodes[x].checked = node.checked;
}
}
//定义操作复选框按钮的方法。
function checkAllByBut(num){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
if(num>1)
collMailNodes[x].checked = !collMailNodes[x].checked;
else
collMailNodes[x].checked = num;
}
}
//删除所选邮件。
function deleteMail(){
if (!confirm("你真的要删除所选的邮件吗?")){
return;
}
//获取所有的mail节点
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (collMailNodes[x].checked) {
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选
</th>
<th>
发件人
</th>
<th>
邮件名称
</th>
<th>
邮件附属信息
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11
</td>
<td>
我是邮件11
</td>
<td>
我是附属信息11
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三22
</td>
<td>
我是邮件22
</td>
<td>
我是附属信息22
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三33
</td>
<td>
我是邮件33
</td>
<td>
我是附属信息33
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三44
</td>
<td>
我是邮件44
</td>
<td>
我是附属信息44
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三55
</td>
<td>
我是邮件55
</td>
<td>
我是附属信息55
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三66
</td>
<td>
我是邮件66
</td>
<td>
我是附属信息66
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三117
</td>
<td>
我是邮件117
</td>
<td>
我是附属信息17
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三118
</td>
<td>
我是邮件118
</td>
<td>
我是附属信息118
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三119
</td>
<td>
我是邮件119
</td>
<td>
我是附属信息119
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三1100
</td>
<td>
我是邮件110
</td>
<td>
我是附属信息110
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11a
</td>
<td>
我是邮件11a
</td>
<td>
我是附属信息11a
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11b
</td>
<td>
我是邮件11b
</td>
<td>
我是附属信息1b1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11c
</td>
<td>
我是邮件11c
</td>
<td>
我是附属信息11c
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11d
</td>
<td>
我是邮件11d
</td>
<td>
我是附属信息11d
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三11e
</td>
<td>
我是邮件11e
</td>
<td>
我是附属信息11e
</td>
</tr>
<tr>
<th>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选
</th>
<th colspan="3">
<input type="button" value="全选" οnclick="checkAllByBut(1)" />
<input type="button" value="取消全选" οnclick="checkAllByBut(0)" />
<input type="button" value="反选" οnclick="checkAllByBut(2)" />
<input type="button" value="删除所选附件" οnclick="deleteMail()" />
</th>
</tr>
</table>
</body>
</html>