表格全选

最新推荐文章于 2022-05-09 15:06:52 发布

star walkin

最新推荐文章于 2022-05-09 15:06:52 发布

阅读量182

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_44336097/article/details/110099996

版权

<!--表格全选-->
<!DOCTYPE html>
<html>
<head>
	<title>表格全选</title>
	<style type="text/css">
		table{
			border: 1px solid;
			width: 500px;
			margin-left: 30%; 
		}

		td,th{
			text-align: center;
			border:1px solid;
		}

		div{
			margin-top: 10px;
			margin-left: 30%;  
		}

		.out{
			background-color: white;
		}

		.over{
			background-color: pink;
		}
	</style>

</head>
<body>

<table>
	<caption>学生信息表</caption>
	<tr>
		<th><input type="checkbox" name="cb" id="firstCb"></th>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>操作</th>
	</tr>

	<tr>
		<td><input type="checkbox" name="cb"></td>
		<td>1</td>
		<td>令狐冲</td>
		<td>男</td>
		<td><a href="javascript:void(0);">删除</a></td>
	</tr>

	<tr>
		<td><input type="checkbox" name="cb"></td>
		<td>2</td>
		<td>任我行</td>
		<td>男</td>
		<td><a href="javascript:void(0);">删除</a></td>
	</tr>

	<tr>
		<td><input type="checkbox" name=cb"></td>
		<td>3</td>
		<td>岳不群</td>
		<td>?</td>
		<td><a href="javascript:void(0);">删除</a></td>
	</tr>
</table>

<div>
	<input type="button" id="selectAll" value="全选" name="">
	<input type="button" id="unselectAll" value="全不选" name="">
	<input type="button" id="selectRev" value="反选" name="">
</div>

<script type="text/javascript">
	/*
		分析：
			1.全选：
				* 获取所有的checkbox
				* 遍历cb，设置每一个cb的状态为选中 checked
	*/
	//1.在页面加载完后绑定事件
	window.onload = function(){
		//2.给全选按钮绑定单击事件
		document.getElementById("selectAll").onclick = function(){
			// 全选
			// 1.获取所有的checkbox
			var cbs = document.getElementByName("cb");
			// 2.遍历
			for(var i = 0; i < cbs.length; i++){
				//3.设置每一个cb的状态为选中 checked
				cbs[i].checked = true;
			}
		}

		document.getElementById("unselectAll").onclick = function(){
			// 全不选
			// 1.获取所有的checkbox
			var cbs = document.getElementByName("cb");
			// 2.遍历
			for(var i = 0; i < cbs.length; i++){
				//3.设置每一个cb的状态为未选中 checked
				cbs[i].checked = false;
			}
		}

		document.getElementById("selectRev").onclick = function(){
			// 反选
			// 1.获取所有的checkbox
			var cbs = document.getElementByName("cb");
			// 2.遍历
			for(var i = 0; i < cbs.length; i++){
				//3.设置每一个cb的状态为相反
				cbs[i].checked = !cbs[i].checked;
			}
		}

		document.getElementById("firstCb").onclick = function(){
			// 第一个cb点击
			// 1.获取所有的checkbox
			var cbs = document.getElementByName("cb");
			// 获取第一个cb
			// alert(this);
			// 2.遍历
			for(var i = 0; i < cbs.length; i++){
				//3.设置每一个cb的状态和第一个cb的状态一样
				cbs[i].checked = this.checked;
			}
		}

		// 给所有tr绑定鼠标移到元素之上和移出元素之上事件
		var trs = document.getElementByTagName("tr");
		//2.遍历
		for (var i = 0; i < trs.length; i++){
			//移到元素之上
			trs[i].onmouseover = function(){
				//alert(1);
				this.className = "over";

			}

			//移出元素
			trs[i].onmouseout = function(){
				this.className = "out";
			}
		}
	} 
</script>

</body>
</html>

在这里插入图片描述

star walkin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
表格全选

<!DOCTYPE html><html><head> <title>表格全选</title> <style type="text/css"> table{ border: 1px solid; width: 500px; margin-left: 30%; } td,th{ text-align: center; border:1px solid
复制链接

扫一扫