涉及到的知识点有：
1、背景色间隔高亮显示
2、全选，取消选择，返选的实现
3、删除行，确认对话框的应用
如下图所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<link rel="stylesheet" type="text/css" href="table.css">
<title></title>
<style type="text/css">
.one
{
background-color:#9bf7d5;
}
.two
{
background-color:#f3e99a;
}
.over
{
background-color:#ef7125;
}
</style>
<script type="text/javascript">
function getSum()
{
/*
获取所有名称为item的复选框，判断checked状态，为true表示被先中，
获取该节点的value进行累加
*/
var sum = 0;
var collItemNodes = document.getElementsByName("item");
for(var i=0;i<collItemNodes.length;i++)
{
if(collItemNodes[i].checked)
{
sum += parseInt(collItemNodes[i].value);
}
}
var sSum = sum+"元";
document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
}
//全选
function checkAll(node)
{
/*
遍历所有的选项,然后把它们的选中状态设置成与全选按钮一样的状态就可以
*/
var collMailNodes = document.getElementsByName("mail");
for(var i=0;i<collMailNodes.length;i++)
{
collMailNodes[i].checked = node.checked;
}
}
//行颜色间隔显示功能
var name;
function trColor()
{
//1、获取表格对象
var oMailTab = document.getElementById("mailtable");
//2、获取行对象
var collTrNodes = oMailTab.rows;
//3、对所有需要设置背景的行对象进行遍历
for(var i=1;i<collTrNodes.length-1;i++)
{
if(i%2==1)
{
collTrNodes[i].className="one";
}else
{
collTrNodes[i].className="two";
}
collTrNodes[i].onmouseover = function()
{
name = this.className;
this.className="over";
}
collTrNodes[i].onmouseout = function()
{
this.className=name;
}
}
}
//定义按钮的操作,全选，取消，返选，这里的一个技巧是，如果大于1，取返，如果是0或1，则checked的值跟传进的数字一样
function checkAllByButton(num)
{
var collMailNodes = document.getElementsByName("mail");
for(var i=0;i<collMailNodes.length;i++)
{
if(num>1)
{
collMailNodes[i].checked = !collMailNodes[i].checked;
}else
{
collMailNodes[i].checked = num;
}
}
}
//删除所选邮件
function deleteMail()
{
if(confirm("确定要删除所选中的邮件吗？"))
{
var collMailNodes = document.getElementsByName("mail");
for(var i=0;i<collMailNodes.length;i++)
{
if(collMailNodes[i].checked ==true)
{
var oTrNode = collMailNodes[i].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);//remove后长度变小，所以要i--
i--;
}
}
trColor();//如果删除的为同一颜色时需要重新更改背景颜色
}
}
onload = function()
{
trColor();
}
</script>
</head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/>
</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件附属信息</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三01</td>
<td>我是张三01</td>
<td>附属信息01</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三02</td>
<td>我是张三02</td>
<td>附属信息02</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三03</td>
<td>我是张三03</td>
<td>附属信息03</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三04</td>
<td>我是张三04</td>
<td>附属信息04</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三05</td>
<td>我是张三05</td>
<td>附属信息05</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三06</td>
<td>我是张三06</td>
<td>附属信息06</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三07</td>
<td>我是张三07</td>
<td>附属信息07</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三08</td>
<td>我是张三08</td>
<td>附属信息08</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三09</td>
<td>我是张三09</td>
<td>附属信息09</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三10</td>
<td>我是张三10</td>
<td>附属信息10</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</td>
<td colspan="3">
<input type="button" value="全选" onclick="checkAllByButton(1)"/>
<input type="button" value="取消" onclick="checkAllByButton(0)"/>
<input type="button" value="返选" onclick="checkAllByButton(2)"/>
<input type="button" value="删除附件信息" onclick="deleteMail()"/>
</td>
</tr>
</table>
</body>
</html>