利用jquery动态添加和删除表格的一行，并且保存单行数据

开发时遇到一个需求：要求要在页面的表格可以添加和删除一行，并能填写对应的数据后保存这一行数据。

HTML代码

界面使用了freemarker框架，teams是后台传过来的list类型数据

<form action="" id="" method="post"> ... <table id="addTable" > <tr class="first_tr"> <th>姓名</th> <th>国籍</th> <th>单位</th> <th>职务</th> <th>专业、特长</th> <th>操作</th> </tr> <#list teams as item> <tr> <input type="hidden" id="id" value="${item.id!}"/> <td>${item.name!}</td> <td>${item.gj!}</td> <td>${item.dw!}</td> <td>${item.zw!}</td> <td>${item.zytc!}</td> <td><input type="button" onclick="delRow(this)" value="-删除"/></td> </tr> </#list> </table> <table> <tr> <td celspan="6"> <input type="button" onclick="addRow()" value="+添加"/> </td> </tr> </table> ... </form>

为了不提交表格模板，我把模板放在了form表单外面，并且样式设置为不可见

需要添加的表格模板:

<table style="display: none" id="tbl" > <tr class="will80"> <td><input type="text" id="name" name="name" /></td> <td><input type="text" id="gj" name="gj" /></td> <td><input type="text" id="dw" name="dw" /></td> <td><input type="text" id="zw" name="zw" /></td> <td><input type="text" id="zytc" name="zytc"/></td> <td></td> //新增的表格中需要有保存和删除操作 <td><input type="button" onclick="save(this)" value="保存"/><input type="button" onclick="delRow(this)" value="-删除"/></td> </tr> </table>

主要靠jquery代码，实现为#addTable添加最后一行 
原理就是获取id为“tbl”的一行复制添加到id为“addTable”的最后一行。 
保存这一行数据使用ajax。

jQuery代码

添加表格行

function addRow(){ var targetTbody= $("#tbl tbody"); //获取#tbl表格的最后一行 var tr = targetTbody.children("tr:last"); //复制到#addTable表格最后 var tr2=$("#addTable tbody").children("tr:last"); tr2.after(tr[0].outerHTML); }

删除表格行

function delRow(obj){ //获取当前对象的父元素，在其下寻找id为“id”的元素的值 var id1=$(obj).parents("tr").find("#id").val(); var res=confirm("确定要删除么？"); if(res){ //删除界面元素，当前行 $(obj).parents("tr").remove(); } //若有id就表示该数据是界面原本就有的，需要删除数据库数据 //若无id表示为界面动态添加的，删除时只需要删除界面元素 if(id1!=null){ //ajax删除数据 $.ajax({ url : "suggestpage_delTeam.do", data : {"id":id1}, type : "POST", success : function(data) { if (data == "true") { alert("删除成功"); } else { alert(data); } } }); } }

保存单行数据

function save(obj) { var param = {}; //获取当前属性 param.projectId="${proId}"; param.name = $(obj).parents("tr").find("#name").val(); param.gj = $(obj).parents("tr").find("#gj").val(); param.dw =$(obj).parents("tr").find("#dw").val(); param.zw = $(obj).parents("tr").find("#zw").val(); param.zytc = $(obj).parents("tr").find("#zytc").val(); //判空校验 if(checkNull(obj)){ //保存数据 $.ajax({ url : "suggestpage_savePeople.do", ontentType : "application/x-www-form-urlencoded; charset=UTF-8", data : param, type : "POST", success : function(data) { if (data == "true") { alert("保存成功"); //跳转界面 window.location="part2.do?proId="+param.projectId; } else { alert(data); } } }); } } //判空校验 function checkNewNull(obj){ var ok=true; //获取新增的input var newtr=$(obj).parents("tr").find("input"); newtr.each(function(){ if($(this).val()==""){ alert("请将表单填写完整！"); $(this).focus(); ok=false; return false; } }); return ok; }