<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.over{
background-color: pink;
}
.out{
background-color: white;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<script>
//在页面加载完之后绑定事件
$(function () {
//给全选按钮绑定单击事件
/**
* 1. 获取所有checkbox
* 2. 遍历checkbox并设置每个checkbox为选中状态
*/
//设置全选jQuery写法
$("#selectAll").click(function () {
$("input[type='checkbox']:not('#firstcb')").prop("checked",true);
});
//设置全不选jQuery写法
$("#unSelectAll").click(function(){
$("input[type='checkbox']:not('#firstcb')").prop("checked",false);
});
//设置反选jQuery写法
$("#selectRev").click(function () {
var che = $("input[type='checkbox']:not('#firstcb')");
$.each(che, function(index,ele) {
$(ele).prop("checked",!ele.checked);
});
});
//设置第一个按钮功能 jQuery写法
$("#firstcb").click(function () {
$("input[type='checkbox']").prop("checked",$(this).prop("checked"));;
});
//添加
$("#btn_add").click(function () {
//2.获取input框输入数据
var elt_id = $("#id").val();
var elt_name = $("#name").val();
var elt_gender = $("#gender").val();
var tr0 = $("<tr></tr>");
//给tr里面添加td标签
var tr1 = tr0.html(
"<td><input type='checkbox' name='cb'></td>"+
"<td>"+elt_id+"</td>"+
"<td>"+elt_name+"</td>"+
"<td>"+elt_gender+"</td>"+
"<td><a href='javascript:void(0)' onclick='delTr(this);'>删除</a></td>\n");
//添加到table节点
$("table").append(tr1);
move();
});
});
function move() {
//给所有tr绑定鼠标移动到元素之上和移除元素之上
var trs = $("tr");
//给每个tr添加鼠标移除和鼠标进入事件
$("tr").mouseover(function () {
$(this).addClass("over");
});
$("tr").mouseout(function () {
$(this).removeClass("over");
});
}
//删除
function delTr(obj){
//获取tr
var tr = $(obj).parent().parent();
//删除子节点
tr.remove();
}
</script>
</head>
<body>
<div id="add">
<input type="text" name="id" id="id" value="" placeholder="请输入编号" />
<input type="text" name="name" id="name" value="" placeholder="请输入姓名" />
<input type="text" name="gender" id="gender" value="" placeholder="请输入性别" />
<input type="button" name="btn_add" id="btn_add" value="添加" />
</div>
<table>
<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);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>可乐</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>二哈</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>4</td>
<td>当当</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>5</td>
<td>天天</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</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>