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

来源：互联网发布：mysql主键生成编辑：程序博客网时间：2024/05/17 15:02

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

页面代码

<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 代码

<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 加入 tbodyvar 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>

效果图：

阅读全文

0 0