利用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; }