【jquery】一個簡單的單選、多選、全選、反選、刪除的小功能

對表格內容進行單行刪除、單行選中、多行選中、全選、反選、刪除選中行等操作

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