标签：
对表格内容进行单行删除、单行选中、多行选中、全选、反选、删除选中行等操作
HTML代码
<table class="table table-bordered border-shadow">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-1">
<col class="col-xs-4">
<col class="col-xs-4">
<col class="col-xs-2">
</colgroup>
<thead>
<tr>
<th style="width:5%">选择</th>
<th style="width:5%">序号</th>
<th style="width:35%">内容</th>
<th style="width:35%">图片</th>
<th style="width:20%">操作</th>
</tr>
</thead>
<tbody id="tab_lisy">
<tr>
<td>
<div class="checkbox" style="padding-left:30px;">
<label>
<input type="checkbox" value="0" >
</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<button class="btn btn-success del_line" type="button">删除</button>
<button class="btn btn-success" type="button">忽略</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox" style="padding-left:30px;">
<label>
<input type="checkbox" value="0">
</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<button class="btn btn-success del_line" type="button">删除</button>
<button class="btn btn-success" type="button">忽略</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox" style="padding-left:30px;">
<label>
<input type="checkbox" value="0">
</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<button class="btn btn-success del_line" type="button">删除</button>
<button class="btn btn-success" type="button">忽略</button>
</td>
</tr>
<tr>
<td>
<div class="checkbox" style="padding-left:30px;">
<label>
<input type="checkbox" value="0">
</label>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<button class="btn btn-success del_line" type="button">删除</button>
<button class="btn btn-success" type="button">忽略</button>
</td>
</tr>
</tbody>
</table>
<div>
<button class="btn btn-success" id="all_line" type="button">全选</button>
<button class="btn btn-success " id="del_all_line" type="button">删除</button>
</div>
jquery代码
//单行删除 $(".del_line").click(function(){ $(this).parents("tr").empty(); }); //全选、反选 var line=1; $("#all_line").on("click",function() { if (line==1) { $("#tab_lisy").find(":checkbox").prop("checked",true).val("1"); $(this).text("反选"); line=0; }else{ $("#tab_lisy").find(":checkbox").prop("checked",false).val("0"); $(this).text("全选"); line=1; } }); //单选 $("#tab_lisy").find(":checkbox").on("click",function() { if($(this).val()==0){ $(this).prop("checked",true).val("1"); }else{ $(this).prop("checked",false).val("0"); } }); //删除所有选中的 $("#del_all_line").on("click",function(){ $("#tab_lisy").find(":checkbox[value=1]").parents("tr").empty(); });
【jquery】一个简单的单选、多选、全选、反选、删除的小功能
标签：
原文地址：http://www.cnblogs.com/zhixi/p/4885873.html
