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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

爲了避免提交表格模板，我把模板放在了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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

主要靠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); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

刪除表格行

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); } } }); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

保存單行數據

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