邮件列表

刺骨的言语ヽ痛彻心扉 2022-05-13 08:48 217阅读 0赞

<!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=gb2312" />
    <title>无标题文档</title>
    
    <style type="text/css">
    
    table,table td, table th{
    	border:#0066FF 1px solid;
    	width:600px;
    	}
    table th{
    	background-color:#99FF00;
    	}
    table td{
    	text-align:center;
    	}
    .one{
    	background-color:#CCFFCC;
    	}
    .two{
    	background-color:#FFFF99;
    	}
    .over{
    	background-color:#00CC66;
    	}
    </style>
    	
    <script type="text/javascript">
    
    var name;
    
    function trColor()
    {
    	var tabNode = document.getElementById('mailid');
    	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].οnmοuseοver=function()
    		{
    			name = this.className;
    			this.className = "over";
    		};
    		trs[x].οnmοuseοut=function()
    		{
    			this.className = name;
    		}
    	}
    }
    
    onload = function()
    {
    	trColor();
    }
    
    //定义checkbox的全选动作
    function checkAll(index)
    {
    	var boxNode = document.getElementsByName("all")[index];
    	
    	var mailNodes = document.getElementsByName("mail");
    	
    	for(var x = 0; x < mailNodes.length; x++)
    	{
    		mailNodes[x].checked = boxNode.checked;
    	}
    }
    
    //定义按钮的选取效果
    function checkByBut(num)
    {
    	var mailNodes = document.getElementsByName("mail");
    	
    	for(var x = 0; x < mailNodes.length; x++)
    	{
    		if(num == 2)
    			mailNodes[x].checked = !mailNodes[x].checked;
    		else
    			mailNodes[x].checked = num;
    		/*if(num == 1)
    			mailNodes[x].checked = true;
    		else if(num == 0)
    			mailNodes[x].checked = false;
    		else
    			mailNodes[x].checked = !mailNodes[x].checked;
    			*/
    	}
    }
    
    function deleMail()
    {
    	if(confirm("你真的要删除所选邮件吗？"))
    	{
    		var mailNodes = document.getElementsByName("mail");
    		
    		var arr = [];
    		var pos = 0;
    		for(var x = 0; x < mailNodes.length; x++)
    		{
    			if(mailNodes[x].checked)
    			{
    				var trNode = mailNodes[x].parentNode.parentNode;
    				arr[pos++] = trNode;
    			}
    		}
    		
    		for(var x = 0; x < arr.length; x++)
    		{
    			arr[x].removeNode(true);
    		}
    		
    		trColor();
    	}
    }
    
    </script>
    
    </style>
    
    </head>
    
    <body>
    
    <table id="mailid">
    
    	<tr>
    		<th>
    			<input type="checkbox" name="all" οnclick="checkAll(0)" />全选
    		</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>
    			张三117
    		</td>
    		<td>
    			我是邮件117
    		</td>
    		<td>
    			我是附属信息117
    		</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>
    			我是邮件1100
    		</td>
    		<td>
    			我是附属信息1100
    		</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>
    			我是附属信息11b
    		</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(1)" />全选
    		</th>
    		<th colspan="3">
    			<input type="button" value="全选" οnclick="checkByBut(1)" />
    			<input type="button" value="取消全选" οnclick="checkByBut(0)" />
    			<input type="button" value="反选" οnclick="checkByBut(2)" />
    			<input type="button" value="删除所选邮件" οnclick="deleMail()" />
    		</th>
    	</tr>
    
    </table>
    
    </body>
    </html>

运行结果：

![1354754958_4868.jpg][]

![1354754964_7366.jpg][]

![1354754971_2746.jpg][]

![1354754978_5198.jpg][]

[1354754958_4868.jpg]: https://img-my.csdn.net/uploads/201212/06/1354754958_4868.jpg
[1354754964_7366.jpg]: https://img-my.csdn.net/uploads/201212/06/1354754964_7366.jpg
[1354754971_2746.jpg]: https://img-my.csdn.net/uploads/201212/06/1354754971_2746.jpg
[1354754978_5198.jpg]: https://img-my.csdn.net/uploads/201212/06/1354754978_5198.jpg