首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jquery如何删除table里面checkbox选中的多个行与多个列

Jquery如何删除table里面checkbox选中的多个行与多个列

作者头像
tianyawhl
发布2019-04-04 09:36:52
4.1K0
发布2019-04-04 09:36:52
举报
文章被收录于专栏:前端之攻略前端之攻略

一、删除多行

HTML

<table id = "test_table">
    <tr><td><input type="checkbox" name="test"></td><td>11</td><td>2111</td><td>3111</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>101</td><td>111</td><td>121</td></tr>
</table>
<input type="button" value="delete">

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();
        });
    });
});

二、删除多列

HTML 

<table id="test_table">
    <tr>
        <td><input type="checkbox" name="test">第1列</td>
        <td><input type="checkbox" name="test">第2列</td>
        <td><input type="checkbox" name="test">第3列</td>
        <td><input type="checkbox" name="test">第4列</td>
        <td><input type="checkbox" name="test">第5列</td>
    </tr>
    <tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td></tr>
    <tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr>
    <tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr>
</table>
<input type='button' value='delete'/>

Jquery 代码

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档