使用html + jquery实现页面表格的增加，删除，批量删除，全选，反选功能。

最新推荐文章于 2023-04-11 17:25:12 发布

qq_42797435

最新推荐文章于 2023-04-11 17:25:12 发布

阅读量1.5k

点赞数 6

文章标签： checkbox js jquery

本文链接：https://blog.csdn.net/qq_42797435/article/details/115247037

版权

这篇博客详细介绍了如何使用HTML和jQuery实现页面表格的功能增强，包括新增记录、删除记录、批量删除、全选和反选等常见操作，通过实例代码展示了具体的实现步骤。

摘要由CSDN通过智能技术生成

笔记

    demo
        使用html + jquery实现页面表格的增加，删除，批量删除，全选，反选功能。
          页面效果如下

在这里插入图片描述

   html 代码如下 
            <div>
			<div>
				<input type="button" value="批量删除" onclick="dels()"/>
				<input type="button" value="反选" onclick="invert()"/>
				<input type="button" value="增加" onclick="show()"/>
			</div>
			<div>
				<table border="1px soild black" id="tab">
					<tr>
						<th><input type="checkbox" onclick="selectchecked(this)" id="chk">全选</th>
					 	<th>序号</th>
					 	<th>姓名</th>
					 	<th>年龄</th>
					 	<th>性别</th>
					 	<th>电话</th>
					 	<th>年级</th>
					 	<th>邮箱</th>
					 	<th>删除</th>
					</tr>
				    <tr>
				    	<td><input type="checkbox" name="checkbox" onclick="cancel()"></td>
				    	<td>1</td>
				    	<td>张三</td>
				    	<td>18</td>
				    	<td>男</td>
				    	<td>10086</td>
				    	<td>一年级</td>
				    	<td>10086@qq.com</td>
				    	<td><input type="button" value="删除" onclick="del(this)"></td>
				    </tr>
				    <tr