Jquery删除table里面checkbox选中的多个行

思路:遍历被选中的checkbox对象→根据选中项筛选出需要删除的行→删除行。
实例说明如下:
1、HTML结构

<table id = "test_table">
    <tr><td><input type="checkbox" name="test"></td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td><input type="checkbox" name="test"></td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td><input type="checkbox" name="test"></td><td>7</td><td>8</td><td>9</td></tr>
    <tr><td><input type="checkbox" name="test"></td><td>10</td><td>11</td><td>12</td></tr>
</table>
<input type="button" value="删除">

2、jquery代码


$(function(){  
    $("input[type='button']").click(function() {
        $("input[name='test']:checked").each(function() { // 遍历选中的checkbox
            n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
            $("table#test_table").find("tr:eq("+n+")").remove();
        });
    });
});

3.效果
这里写图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
假设你的 HTML 代码如下: ```html <table id="items"> <thead> <tr> <th>选择</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ids[]" value="1"></td> <td>项目 1</td> <td><button class="delete-btn" data-id="1">删除</button></td> </tr> <tr> <td><input type="checkbox" name="ids[]" value="2"></td> <td>项目 2</td> <td><button class="delete-btn" data-id="2">删除</button></td> </tr> <tr> <td><input type="checkbox" name="ids[]" value="3"></td> <td>项目 3</td> <td><button class="delete-btn" data-id="3">删除</button></td> </tr> </tbody> </table> <button id="batch-delete-btn">批量删除</button> ``` 你可以使用以下 jQuery 代码来实现批量删除: ```javascript $(function() { // 单个删除 $('.delete-btn').click(function() { var id = $(this).data('id'); if (confirm('确定要删除吗?')) { // 发送 AJAX 请求删除数据 $.ajax({ url: '/path/to/delete', type: 'POST', data: {id: id}, success: function() { // 删除 $('tr[data-id="' + id + '"]').remove(); }, error: function() { alert('删除失败!'); } }); } }); // 批量删除 $('#batch-delete-btn').click(function() { var ids = []; $('input[name="ids[]"]:checked').each(function() { ids.push($(this).val()); }); if (ids.length == 0) { alert('请选择要删除的项目!'); return; } if (confirm('确定要删除所选项目吗?')) { // 发送 AJAX 请求删除数据 $.ajax({ url: '/path/to/batch/delete', type: 'POST', data: {ids: ids}, success: function() { // 删除 $.each(ids, function(index, id) { $('tr[data-id="' + id + '"]').remove(); }); }, error: function() { alert('删除失败!'); } }); } }); }); ``` 在单个删除中,我们为每个删除按钮添加了一个点击事件,当用户点击该按钮时,会弹出确认对话框,询问用户是否确定要删除。如果用户确认删除,我们会发送一个 AJAX 请求,将该数据从服务器删除,然后在页面上删除。 在批量删除中,我们首先获取所有被选中的复选框的值,然后检查是否至少选中了一个项目。如果没有选中任何项目,我们会弹出警告消息。如果用户确认要删除所选项目,我们会将所有选中项目的 ID 发送到服务器,服务器会将这些项目从数据库中删除,然后在页面上删除这些
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值