使用jQuery库，实现删除，全选以及批量删除

最新推荐文章于 2023-03-20 19:51:08 发布

原创最新推荐文章于 2023-03-20 19:51:08 发布 · 2.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #css3 #javascript

该博客展示了如何利用jQuery库实现HTML表格中的删除、全选和批量删除功能。通过监听全选按钮和单行复选框的改变事件，动态更新所有复选框的状态。当点击删除按钮时，会弹窗确认删除操作，如果选择确认，相应行将被移除。批量删除功能则在选择多个行后，通过点击批量删除按钮，一次性移除所有选中的行。

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

使用jQuery库，实现删除，全选以及批量删除

我们先来看看代码成品

在这里插入图片描述

看了成品展示，接下来就来看看代码

html代码

<div>
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th></th>
					<th>内容</th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input type="checkbox" class="row"/></td>
					<td>我再北京逗留，身无分无</td>
					<td>
						<span class="edit">编辑 </span> 
						<span class="delete">删除</span>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="row"/></td>
					<td>我再北京逗留，身无分无</td>
					<td>
						<span class="edit">编辑 </span> 
						<span class="delete">删除</span>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="row"/></td>
					<td>我在梦里思来想去，看不见你的影子好着急</td>
					<td>
						<span class="edit">编辑 </span> 
						<span class="delete">删除</span>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="row"/></td>
					<td>你好，我们可以结婚吗</td>
					<td>
						<span class="edit">编辑 </span> 
						<span class="delete">删除</span>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="row"/></td>
					<td>四川是我的家乡</td>
					<td>
						<span class="edit">编辑 </span> 
						<span class="delete">删除</span>
					</td>
				</tr>
				<footer>
					<td colspan="3"><input type="checkbox" name="" id="all" value="" />全选   
					<input type="button" name="" id="delmany" value="批量删除" /></td>
				</footer>
			</table>
		</div>

css代码

<style type="text/css">
		span{
			text-decoration: underline;
		}
	</style>

js代码(引入jQuery库）

实现删除，全选以及批量删除的功能这里肯定是重点

<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//全选
			$('#all').change(function(){
				//获取值checked的值
				var status = $(this).prop('checked');
				$('.row').prop('checked',status);  //批量设置
			})
			
			//单行选中
			
			$('.row').change(function(){
				var all = $('.row').length;
				var checkednum = $('.row:checked').length;
				var status = all == checkednum;
				$('#all').prop('checked',status);
			})
			
			//删除
			$('.delete').click(function(){
				if(confirm('是否确认删除'))   //confirm弹窗
				{
					$(this).closest('tr').remove()
					}
				
			})
			
			//批量删除
			//给按键绑定事件
			$('#delmany').click(function(){
				if($('.row:checked').length>0)
				{
					if(confirm('是否要批量删除'))
					{
						$('.row:checked').each(function(i,v){
							$(v).closest('tr').remove();
						})
					}
				}
				
			})
			//获取checked为true的行
			//删除每一行
			
		})
	
	
	</script>

以上是个人所做的，能力有限，若有知识有使用错的，请多多担待 ^~^