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

选中table里面多行或全选，点击删除，删除被选中的所有行，jquery语句怎么写

举报该文章

相关建议推荐于2017-09-13

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

1、HTML结构

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、效果演示

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/sf242m4p8.html

其他看法

第1个回答 2012-04-25

直接给一个属性，隐藏之不可以？
.attr("display","none")追问

太笼统了吧

第2个回答推荐于2017-10-14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<script src="jquery-1.6.4.min.js"></script>
<script>
$(function(){
$(':checkbox[name=all]').click(function(){
if(this.checked){
$(':checkbox').attr('checked','checked');
}else{
$(':checkbox').removeAttr('checked');
}
})
$('button').click(function(){
var num = 0;
$(':checkbox[name=child]').each(function(){
if($(this).attr('checked')){
$(this).closest('tr').remove();
num++;
}
})
alert('共删除了【'+num+'】行');
})
})
</script>
</head>

<body>

<table id="tab">
<tr>
<td><input type="checkbox" name="all" /></td>
<td>id</td>
<td>value</td>
</tr>
<tr>
<td><input type="checkbox" name="child"/></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" name="child"/></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" name="child"/></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" name="child"/></td>
<td>111</td>
<td>222</td>
</tr>
</table>
<button>删除选中行</button>
</body>
</html>追问

$("#t_two tr.t_r").dblclick(function(){
$(this).clone().appendTo("#t_one");
});

$("#t_one tr.t_r").dblclick(function(){
$(this).remove();
});

谢谢还有个问题，我把#t_two里面的tr双击，复制到#t_one里面了，为什么复制出过的这个tr写双击删除remove事件无效

追答

事件执行没？

追问

执行了，#t_one里面本身存在的tr可以删除，就是#t_two复制过来的节点无效

追答

js完整代码，以及页面table发过来我看下喃.?

追问

$(document).ready(function(){
$("#t_two tr.t_r").dblclick(function(){
$(this).clone().appendTo("#t_one");
});
$("#t_one tr.t_r").dblclick(function(){
$(this).remove();
});
});

追答

改成这样试试：
$("#t_two tr.t_r").dblclick(function(){
$(this).clone().appendTo("#t_one")
.dblclick(function(){
$(this).remove();
});
});

追问

可以了，还有两个问题，谢谢！
1.全选的增加到上面一个table里面的时候，复制出来的还是勾选checked状态，如何解决。
2.如何设置一行只能复制一次，或者说如何设置table_1勾选的行复制到table_2里面后，table_1里面当前行消失或隐藏。当我把复制到table_2里面的行删除后，table_1刚才消失或隐藏的行又显示出来了。

追答

第一个问题：
$(this).removeAttr('checked');//如果这里的this表示的是当前行，那么：$(this).find(':checkbox').removeAttr('checked')
第二个问题：
先移除，再复制，再追加：. $(this).remove().clone().appendTo("#t_one")
.dblclick......

本回答被提问者采纳

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...

用jquery怎么删除<table>的一行
1、自行百度搜索jQuery，然后把jQuery给下载到电脑里面。2、版本下载完毕。3、新建一个HTML文件，并且把HTML文件和jQuery放在同一个文件夹里面。4、使用sublime打开HTML文件，然后用script标签来引入jQuery。如图所示，src后面接的就是jQuery所在的路径。5、再另外写一个script标签，一定是要另外写，不然待会j...

如何用jQuery实现checkbox全选
"checked"); } else { $(":checkbox").removeAttr("checked"); } } \/\/反选 function otherSelect() { $(":checkbox").each(function () { if (

JQuery 对带有checkbox的table操作遍历选中的行的某一列的数据
这个简单，假如你的表格id为table，表格第一列为checkbox，然后在checkbox选中的情况下将表格所有第二列中的数据放到一个数组中 var data = [];$(function(){ $("#table").find(":checkbox:checked").each(function(){ var val = $(this).parent().next().text(); data.push(val...

如何用jquery实现checkbox点选一个选中其他,取消一个取消其他
<script language="javascript"><!-- function checkBox(obj) {\/\/ 只有当选中的时候才会去掉其他已经勾选的checkbox，所以这里只判断选中的情况 if (obj.is(":checked")) { \/\/ 先把所有的checkbox 都设置为不选种 $('input.mybox').prop('checked', false); \/\/ 把自己设置为选...

如何用jquery实现把一个带有checkbox的table中选中行的某些字段,赋值到...
那你就在checkbox上绑定一个click事件，当checkbox被选中的时候，就找到table中的行让后把值赋给它就行了

如何用jquery实现checkbox点选一个选中其他,取消一个取消其他
\/>橘子<\/label> <script src="jquery-1.10.2.min.js"><\/script> <script>\/\/当改变全选值时$("#cb_all").change(function(){\/\/如果全选被选中，则选中所有子选项;否则取消选中子选项if($(this).is(":checked")){$(".cb_fruit").prop("checked",true);}else{$("....

jquery 做table多选删除添加表格
('.shanchu').click(function() { $(':checkbox').each(function(no) { if($(this).attr('type')=='checkbox'){ if($(this).attr('checked')){ $(this).parent().parent().remove(); } }; }); });

jquery 设置 checkbox选择行的input 为不可以编辑状态
这个得做个循环吧经过测试这个就可以 <span><input type="checkbox" checked="checked" \/><input type="text" value="1" \/><input type="text" value="2" \/><\/span> <span><input type="checkbox" \/><input type="text" value="3" \/><input type="text" value="4" \/>...

如何取得table里每一行被checkbox选中的行,有什么办法,用JS的话怎么...
checkbox是装在tr中的，循环遍历所有的checkbox，判断被选中的，即可通过jquery的find（）和parent（）方法取得tr

相似回答

大家正在搜