[javascript] 表格间隔颜色显示，高亮，复选框全选，删除选中项

最新推荐文章于 2023-10-20 14:56:25 发布

STILLxjy

最新推荐文章于 2023-10-20 14:56:25 发布

阅读量245

点赞数

分类专栏： ——java—— javascript

本文链接：https://blog.csdn.net/STILLxjy/article/details/105861070

版权

——java—— 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

效果演示：
在这里插入图片描述
HTML代码：
table.css

table{
	border:#249bdb 1px solid;
	width:500px;
	border-collapse:collapse;
}

table td{
	border:#249bdb 1px solid;
	padding:10px;
}

table th{
	border:#249bdb 1px solid;
	padding:10px;
	background-color:rgb(200,200,200);
}

mail.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" href="table.css">
  <title>Document</title>

  <style type="text/css">
  	.one{
		background-color:#9bf7d5;
	}
	.two{
		background-color:#f3e99a;
	}
	.over{
		background-color:red;
	}
  </style>

  <script type="text/javascript">
  	//行颜色间隔显示
	var prename;
	function trColor(){
		var oTabNode = document.getElementById("mailtable");
		var collTrNodes = oTabNode.rows;
		for(var x=0;x<collTrNodes.length-1;x++){
			if(x%2==1)
				collTrNodes[x].className = "one";
			else
				collTrNodes[x].className = "two";
			
			//高亮显示鼠标所在当前行
			collTrNodes[x].onmouseover = function(){
				prename = this.className;
				//alert(prename);
				this.className = "over";
			}

			collTrNodes[x].onmouseout = function(){
				this.className = prename;
			}

		}
	}
	
	//全选复选框
	function checkAll(node){
		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(){
		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();
	}


	onload = function(){
		trColor();
	}
  </script>
 </head>
 <body>
 	<table id="mailtable">
		<tr>
			<th>
				<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
			</th>
			<th>
				发件人
			</th>
			<th>
				邮件名称	
			</th>
			<th>
				邮件附属信息
			</th>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				依一
			</td>
			<td>
				我是邮件1
			</td>
			<td>
				邮件附属信息1
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				小二
			</td>
			<td>
				我是邮件2
			</td>
			<td>
				邮件附属信息2
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				张三
			</td>
			<td>
				我是邮件3
			</td>
			<td>
				邮件附属信息3
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				李四
			</td>
			<td>
				我是邮件4
			</td>
			<td>
				邮件附属信息4
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				王五
			</td>
			<td>
				我是邮件5
			</td>
			<td>
				邮件附属信息5
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				赵六
			</td>
			<td>
				我是邮件6
			</td>
			<td>
				邮件附属信息6
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				周七
			</td>
			<td>
				我是邮件7
			</td>
			<td>
				邮件附属信息7
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				孙八
			</td>
			<td>
				我是邮件8
			</td>
			<td>
				邮件附属信息8
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
			</td>
			<td colspan="3">
				<input type="button" value="全选" onclick="checkAllByBut(1)"/>
				<input type="button" value="取消全选" onclick="checkAllByBut(0)"/>
				<input type="button" value="反选" onclick="checkAllByBut(2)"/>
				<input type="button" value="删除所选邮件" onclick="deleteMail()"/>
			</td>
		</tr>
	</table>
 </body>
</html>