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>