使用jquery完成表格的全选全不选反选添加删除

Thomas an

于 2021-10-28 09:30:12 发布

阅读量489

点赞数

CC 4.0 BY-SA版权

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_38067185/article/details/121007237

这篇博客介绍了如何利用jQuery实现表格中全选、全不选、反选功能，并详细讲解了如何添加和删除表格行的操作步骤，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>