DOM20---邮件列表的应用

最新推荐文章于 2021-11-16 15:30:39 发布

onyas

最新推荐文章于 2021-11-16 15:30:39 发布

阅读量752

点赞数

分类专栏： DOM 文章标签：背景色间隔高亮显示全选取消选择返选的实现删除行确认对话框的应用

本文链接：https://blog.csdn.net/zheng0518/article/details/9073333

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

涉及到的知识点有：

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" οnclick="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" οnclick="checkAll(this)"/>全选</td>
				<td colspan="3">
					<input type="button" value="全选" οnclick="checkAllByButton(1)"/>
					<input type="button" value="取消" οnclick="checkAllByButton(0)"/>
					<input type="button" value="返选" οnclick="checkAllByButton(2)"/>
					<input type="button" value="删除附件信息" οnclick="deleteMail()"/>
				</td>
			</tr>
		</table>
	</body>
</html>

onyas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM20---邮件列表的应用

涉及到的知识点有：1、背景色间隔高亮显示2、全选，取消选择，返选的实现3、删除行，确认对话框的应用如下图所示： .one { background-color:#9bf7d5; } .two { background-color:#f3e99a; } .over
复制链接

扫一扫