Jquery如何删除table里面checkbox选中的多个行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery如何删除table里面checkbox选中的多个行相关的知识，希望对你有一定的参考价值。
选中table里面多行或全选，点击删除，删除被选中的所有行，jquery语句怎么写
思路：遍历被选中的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、效果演示
.attr("display","none")追问
太笼统了吧
参考技术B <!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......
0410_gdgrid_checkbox_自己强加的多选，选中，批量删除
jQuery 还是很6的，基于这个的表格框架gdGrid一直也在用，主要是可以自带分页，而且样式什么的基本不用怎么调。
原型要求所有列之前有一列是多选框，来实现批量删除多条数据的功能。
1 var grid_selector = "#schedule-grid-table"; 2 var pager_selector = "#schedule-grid-pager"; 3 jQuery(function($) { 4 $(‘.chosen-select‘).chosen({allow_single_deselect:true}); 5 var checkbox = ‘<input type="checkbox" name="checkbox_item" id = "selectAll"value="">‘; 6 var colNames = [ ""+checkbox, "产品编号", "类型", "产品名称", "供应商", "出发地", "目的地","行程天数","销售时间","是否推荐","状态","操作" ]; 7 var gridData = [ 8 { 9 name : "id", 10 index : "id", 11 width : 10, 12 sortable : false, 13 // hidden:true, 14 formatter : function(cellvalue, options, rowObject) { 15 var selectHtml =‘<input type="checkbox" name="checkbox_item" value="‘+cellvalue+‘"></td>‘ ; 16 return selectHtml; 17 } 18 }, 19 { 20 name : "prod_no", 21 index : "prod_no", 22 width : 30, 23 sortable : true 24 }, 25 { 26 name : "type", 27 index : "type", 28 width : 30, 29 sortable : true, 30 formatter : function(cellvalue, options, rowObject) { 31 return dict.showDictDataCName(‘TRAVEL_PROD_TYPE‘,cellvalue,true); 32 } 33 }, 34 { 35 name : "name", 36 index : "name", 37 width : 90, 38 sortable : true, 39 formatter : function(cellvalue, options, rowObject) { 40 var html = ""; 41 if( rowObject.is_discount ==‘Y‘){ 42 html += "<span class=‘hui‘>特惠</span>"; 43 } 44 return html+=cellvalue; 45 } 46 }, 47 { 48 name : "supplier", 49 index : "supplier", 50 width : 40, 51 sortable : true 52 }, 53 { 54 name : "depart_place", 55 index : "depart_place", 56 width : 30, 57 sortable : true 58 }, 59 { 60 name : "destination", 61 index : "destination", 62 width : 30, 63 sortable : true 64 }, 65 { 66 name : "", 67 index : "", 68 width : 30, 69 formatter : function(cellvalue, options, rowObject) { 70 var combind=rowObject.trip_days+"天"+rowObject.trip_nights+"夜"; 71 return combind; 72 } 73 }, 74 { 75 name : "", 76 index : "", 77 width : 60, 78 sortable : true, 79 formatter : function(cellvalue, options, rowObject) { 80 var a ="0"; 81 var b="0"; 82 if(rowObject.sale_end_time!=undefined&&rowObject.sale_start_time!=undefined){ 83 a=rowObject.sale_start_time.substr(0,10); 84 b=rowObject.sale_end_time.substr(0,10); 85 }return a+"--"+b; 86 } 87 }, 88 { 89 name : "is_recommend", 90 index : "is_recommend", 91 width : 20, 92 sortable : true, 93 formatter : function(cellvalue, options, rowObject) { 94 var isYn=""; 95 if(cellvalue=="Y"){ 96 isYn="是"; 97 }else if(cellvalue=="N"){ 98 isYn="否"; 99 } 100 return isYn; 101 } 102 }, 103 { 104 name : "status", 105 index : "status", 106 width : 30, 107 sortable : true, 108 formatter : function(cellvalue, options, rowObject) { 109 return dict.showDictDataCName(‘TRAVEL_PROD_STATUS‘,cellvalue,true); 110 } 111 }, 112 113 { 114 name : "oper", 115 index : "", 116 width : 30, 117 editable : false, 118 sortable : false, 119 align : ‘left‘, 120 resize : true, 121 formatter : function(cellvalue, options, rowObject) { 122 var editBtn = ‘<button type="button" class="btn btn-xs btn-info" id="editBtn" data-toggle="button" onClick="toEditData(\‘‘ 123 + rowObject.id 124 + ‘\‘);">修改</button></div>‘; 125 var deleteBtn = ‘<button type="button" class="btn btn-xs btn-info" id="deleteBtn" data-toggle="button" onClick="deleteProductData(\‘‘ 126 + rowObject.id 127 + ‘\‘);">删除</button></div>‘; 128 return editBtn+" "+deleteBtn; 129 } 130 } ]; 131 132 jQuery(grid_selector).createTable({ 133 subGrid : false, 134 url: ctx + "/travel/product/getTravelProductData.do?rand="+Math.random(), 135 colNames: colNames, 136 colModel: gridData, 137 viewrecords : true, 138 rowNum : 20, 139 rowList : [ 20, 40, 60 ], 140 pager : pager_selector, 141 altRows : true, 142 // multiselect : true, 143 // multiboxonly : false, 144 loadComplete: function () { 145 } 146 }); 147 $(‘.input-daterange‘).datepicker({autoclose: true, format: ‘yyyy-mm-dd‘, language: ‘zh-CN‘}); 148 $("#selectAll").bind("click",function(){ 149 var status = $(this)[0].checked; 150 $("#schedule-grid-table input[type=‘checkbox‘]").each(function () { 151 $(this).prop("checked",status); 152 }) 153 }) 154 });
额，这个表头有自动排序的功能，点击表头的每个字段会自动排序。所以我改成了checkbox之后点击事件没有反应..思考了大半天才发现是把那一列的sortable设置为false..
第二个坑的地方在于，这个checkbox里面的checked的属性要用$(this)[0].checked才能访问到..而且如果直接按照网上的写
$("#checkAll").click(function() {
$(‘input[name="subBox"]‘).attr("checked",this.checked); });$("#selectAll").bind("click",function(){
var status = $(this)[0].checked;
$("#schedule-grid-table input[type=‘checkbox‘]").each(function () {
$(this).prop("checked",status);
})
})
改成上述的方法才能多次点击，多次改变。。
还有一点，就是，关于批量删除，我把这个方法和单个删除的写在一起了，显得代码很冗长..
function deleteProductData(id) { var deleteIds = id; if(deleteIds==null||deleteIds==‘‘||deleteIds==undefined){ deleteIds=""; $("input[name=‘checkbox_item‘]").each( function(){ if($(this).prop("checked")){ deleteIds +=$(this).val()+‘,‘ } } ); } // alert(deleteIds); if(deleteIds==‘‘||deleteIds==null){ $com.warn("请选择相应的产品删除！", 150); }else { $.confirm({ title: ‘提示‘, content: ‘您确认删除该产品？‘, confirm: function () { $.post(ctx + ‘/travel/product/deleteProductById.do‘, {str: deleteIds+""}, function (responseBody) { if (responseBody.code == ‘0000‘) { $com.warn(responseBody.msg, 150); } else { $com.warn("删除失败", 150); } jQuery(grid_selector).trigger("reloadGrid"); }) } }); }
综上，就可以实现gdGrid删除了。。
以上是关于Jquery如何删除table里面checkbox选中的多个行的主要内容，如果未能解决你的问题，请参考以下文章
jquery 如何选中table中的所有checkbox 求高手帮忙解答
一个table表格，里面的tr是append添加的，并且id是动态变化的，用jquery怎么删除在该表选择的行。