jquery+js實現動態表格的創建及列表全選等操作
1.效果圖附上：
2.代碼呈上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.min.js.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<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();
// 創建 td 對象 並將相應的值插入
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>");
//創建 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 已經將 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>
</head>
<body>
<h2 align="center">jquery+js實現動態表格的創建及列表全選等操作</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>
</html>