利用jquery實現(xiàn)動態(tài)表格的相關(guān)操作以及列表全選功能

程序猿130 2017-08-04

展開全文

通過jQuery來，動態(tài)創(chuàng)建表格，增加，以及刪除某一行，以及全選，取消全選，刪除選中行等操作，加強jquery 操作dom 對象的能力

頁面代碼

[html] view plain copy

<body>
<h2 align="center">jquery 實現(xiàn)動態(tài)表格的創(chuàng)建及列表全選等操作</h2>
<div align="center">
編號：<input id="tId" type="text" />
名稱：<input id="name" type="text" />
價格：<input id="price" type="text" />
<input id="add" type="button" value="添加" />
<br />
<br />
</div>
<table id="tab" width="80%" align="center" cellspacing="0" border="1" bordercolor="#a0c6e5">
<tbody id="tbody">
<tr align="center">
<td><input type="checkbox" /></td>
<td>編號</td>
<td>名稱</td>
<td>價格</td>
<td>操作</td>
</tr>
<tr align="center">
<td><input type="checkbox" /></td>
<td>001</td>
<td>java</td>
<td>36.5</td>
<td><input type="button" value="delete"></td>
</tr>
</tbody>
</table>
<br>
<br>
<div align="center">
<input id="selectAll" type="button" value="全選" />
<input id="cancelSelect" type="button" value="取消選中" />
<input id="deleteSelect" type="button" value="刪除選中" />
<br />
<br />
</div>
</body>

js 代碼

[javascript] view plain copy

<script type="text/javascript" src="./js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#add").click(function(){ //為按鈕添加事件
//獲取值
var tId = $("#tId").val();
var name = $("#name").val();
var price = $("#price").val();
// 創(chuàng)建 td 對象并將相應(yīng)的值插入
var cbTd = $("<td><input type='checkbox' /></td>");
var idTd = $("<td></td>").text(tId);
var nameTd = $("<td></td>").text(name);
var priceTd = $("<td></td>").append(price);
var acTd = $("<td><input type='button' value='delete' /></td>");
//創(chuàng)建 tr 對象將td 對象放入 tr, 再將tr 加入 tbody
var tr = $("<tr></tr>").append(cbTd).append(idTd).append(nameTd).append(priceTd).append(acTd).attr("align","center");
$("#tbody").append(tr);
});
//對每個刪除按鈕綁定刪除事件
// 這種將一組對象后加 click 事件，只能將原有的對象綁定上事件，新添加的綁定不了需要使用 live/on 方法
/*
$("input[value='delete']").click(function(){
$(this).parent().parent().remove();
});
*/
// js 1.9 已經(jīng)將 live 換位 on
$("input[value='delete']").live("click",function(){
$(this).parent().parent().remove();
});
//全選
$("#selectAll").click(function(){
$("input[type='checkbox']").attr("checked",true);
});
//取消全選
$("#cancelSelect").click(function(){
$("input[type='checkbox']:checked").attr("checked",false);
});
//刪除選中
/* 1.
$("#deleteSelect").click(function(){
$("input[type='checkbox']:checked").parent().parent().remove();
});
*/
//2. 遍歷
$("#deleteSelect").click(function(){
var chks = $("input[type='checkbox']:checked");
$.each(chks,function(i,ck){
$(ck).parent().parent().remove();
})
});
});
</script>