JavaScript实现表格操作：全选、全不选、反选及行鼠标悬停效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44764207/article/details/114043636

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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>
		<script type="text/javascript">
			//1、在页面加载完后绑定事件
			window.onload = function(){
				//2、给全选按钮绑定单击事件
				document.getElementById("selectAll").onclick = function(){
					//全选
					//1、获取所有的checkbox
					var cbs = document.getElementsByName("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.getElementsByName("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.getElementsByName("cb");
					//2、遍历
					for (var i = 0; i < cbs.length; i++) {
						//3、设置每一个cb的状态为相反 checked
						cbs[i].checked = !cbs[i].checked;
					}
				}
				
				document.getElementById("firstCb").onclick = function(){
					//第一个cb点击
					//1、获取所有的checkbox
					var cbs = document.getElementsByName("cb");
					//获取第一个cb
					//2、遍历
					for (var i = 0; i < cbs.length; i++) {
						//3、设置每一个cb的状态和第一个cb的状态一样
						cbs[i].checked = this.checked;
					}
				}
				
				//给所有tr绑定鼠标移动到元素之上和移出元素之上事件
				var trs = document.getElementsByTagName("tr");
				//2、遍历
				for (var i = 0; i < trs.length; i++) {
					//移到元素之上
					trs[i].onmouseover = function(){
						this.className = "over";
					}
					
					//移出元素
					trs[i].onmouseout = function(){
						this.className = "out";
					}
				}
			}
		</script>
	</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="全选" />
			<input type="button" id="unSelectAll" value="全不选" />
			<input type="button" id="selectRev" value="反选" />
		</div>
	</body>
</html>