删除按钮点击事件(批量删除)

本文详细介绍如何在前端通过点击事件触发删除操作,包括获取选中行数据、弹出确认框、检查数据状态及使用Ajax进行异步数据提交的过程。

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

首先去div上面早到这个button按钮找到删除按钮的ID
在这里插入图片描述
再把它放入click点击事件中
在这里插入图片描述
返回成功的数据

checkStatus 该方法库获取到表格所选中行的相关数据

获取选取行的数据数组
在这里插入图片描述
判断语句,如果选中数据,而且里面也有数据的话就会弹出一个“确定要删除选择的数据吗”的提示框,如果你没有选中再去点击删除的话,就换弹出“请选择需要删除的数据”的提示框
在这里插入图片描述
再次判断,判断选项里面有没有已经启用的项,如果启用就弹出这个提示框
在这里插入图片描述
用Ajax异步提交选择所需要的列表接口地址
在这里插入图片描述
再选择数据传输通道的类型与传输数据的类型

在这里插入图片描述
判断数据有没有问题,如果没有问题就刷新数据,如果有问题,就跳出“数据异常”

在这里插入图片描述

要通过点击批量删除按钮来使用AJAX实现批量删除数据库内的信息,你需要编写以下代码: HTML代码: ``` <button id="delete-selected">批量删除</button> <table id="data-table"> <thead> <tr> <th><input type="checkbox" id="select-all"></th> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1</td> <td>张三</td> <td>20</td> <td><button class="delete-btn" data-id="1">删除</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>李四</td> <td>25</td> <td><button class="delete-btn" data-id="2">删除</button></td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>王五</td> <td>30</td> <td><button class="delete-btn" data-id="3">删除</button></td> </tr> </tbody> </table> ``` 在上面的代码中,我们创建了一个表格,包含了一些数据和一个批量删除按钮。每个数据行都有一个复选框和一个删除按钮。每个删除按钮都有一个 `data-id` 属性,用于存储要删除的数据的ID。 JavaScript代码: ``` $(document).ready(function() { // 全选/取消全选 $('#select-all').click(function() { $('input[type="checkbox"]').prop('checked', $(this).prop('checked')); }); // 单个删除 $('.delete-btn').click(function() { var id = $(this).data('id'); $.ajax({ url: 'your-url-to-delete-data?id=' + id, type: 'DELETE', success: function(result) { // 删除成功后执行的代码 alert('删除成功'); window.location.reload(); }, error: function(error) { // 删除失败后执行的代码 alert('删除失败'); } }); }); // 批量删除 $('#delete-selected').click(function() { var ids = []; $('input[type="checkbox"]:checked').each(function() { ids.push($(this).closest('tr').find('.delete-btn').data('id')); }); if (ids.length == 0) { alert('请至少选择一项'); return; } $.ajax({ url: 'your-url-to-delete-data?ids=' + ids.join(','), type: 'DELETE', success: function(result) { // 删除成功后执行的代码 alert('删除成功'); window.location.reload(); }, error: function(error) { // 删除失败后执行的代码 alert('删除失败'); } }); }); }); ``` 在上面的代码中,我们使用jQuery来添加点击事件处理程序。单击删除按钮时,我们从 `data-id` 属性中获取要删除的数据的ID,并使用AJAX请求将其从数据库中删除。在批量删除时,我们首先获取选中行中的所有ID,然后将它们作为一个字符串发送到服务器端进行批量删除。在成功或失败的情况下,我们使用 `alert` 弹出相应的消息,并重新加载页面以显示更新后的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值