利用jquery实现动态表格的相关操作以及列表全选功能

程序猿130 2017-08-04

展开全文

通过jQuery来，动态创建表格，增加，以及删除某一行，以及全选，取消全选，删除选中行等操作，加强jquery 操作dom 对象的能力

页面代码

[html] view plain copy

<body>
<h2 align="center">jquery 实现动态表格的创建及列表全选等操作</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();
// 创建 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>