类似于邮件治理，具有全选，反选功能的代码 _Web前端

类似于邮件管理，具有全选，反选功能的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

table{
	border:#0000FF 1px solid;
	width:70%;
	}
table td,table th{
	border:#0099FF 1px solid;
	}
table th{
	background-color:#009900;
	}
	
.one{
	background-color:#FFFF99;
	}
.two{
	background-color:#33FFFF;
	}
.over{
	background-color:#006699;
	}
</style>



<script type="text/javascript">

//行颜色间隔显示并高亮。

var name;
function trColor()
{
	var tabNode = document.getElementsByTagName("table")[0];
	
	var trs = tabNode.rows;
	
	for(var x=1 ; x<trs.length-1; x++)
	{
		if(x%2==1)
			trs[x].className = "one";
		else
			trs[x].className = "two";
		
		trs[x].onmouseover = function()
		{
			name = this.className;
			this.className = "over";
		};
		
		trs[x].onmouseout  = function()
		{
			this.className = name;
		}
	}
}


window.onload = function()
{
	trColor();
}


// 完成checkbox的全选动作。
function checkAll(index)
{
	var allNode = document.getElementsByName("all")[index];
	
	var mails = document.getElementsByName("mail");
	
	for(var x=0; x<mails.length; x++)
	{
		mails[x].checked = allNode.checked;
	}
}

//完成按钮的选取。
function checkByBut(num)
{
	var mails = document.getElementsByName("mail");
	
	for(var x=0; x<mails.length; x++)
	{
		if(num>1)
			mails[x].checked = !mails[x].checked;
		else
			mails[x].checked = num;
	}
}

//删除所选邮件。
function delMail()
{

	if(!window.confirm("你真的要删除所选邮件吗?"))
		return ;
	var mails = document.getElementsByName("mail");
	

	var arr = new Array();
	var pos =0;
	for(var x=0; x<mails.length; x++)
	{
		if(mails[x].checked)
		{
			var trNode = mails[x].parentNode.parentNode;
			arr[pos++] = trNode;
		}
	}
	
	for(var x=0; x<arr.length; x++)
	{
		var trNode = arr[x];
		trNode.parentNode.removeChild(trNode);
	}
	
	trColor();
}
</script>


</head>

<body>

<table>
	<tr>
    	<th><input type="checkbox" name="all" onclick="checkAll(0)" />全选</th>
        <th>发件人</th>
        <th>邮件名称</th>
    </tr>
    <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三00</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三11</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三22</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三33</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三mm</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三44</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三55</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三66</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三77</td>
        <td>新的邮件</td>
    </tr> <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三88</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三99</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三aa</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三zz</td>
        <td>新的邮件</td>
    </tr>
    
    <tr>
    	<th><input type="checkbox" name="all" onclick="checkAll(1)" />全选</th>
        <th colspan="2">
        	<input type="button" value="全选" onclick="checkByBut(1)" />
            <input type="button" value="取消全选" onclick="checkByBut(0)" />
            <input type="button" value="反选" onclick="checkByBut(2)" />
            <input type="button" value="删除所选邮件" onclick="delMail()" />
       	</th>
        
    </tr>
</table>

</body>
</html>