jquery製作具有新增與刪除功能的表單（轉載加修改）
阿新 • • 發佈：2019-01-07
jQuery製作具有新增與刪除功能的表單
效果圖如下：
js程式碼如下：
$(document).ready(function(){ //<tr/>居中 $("#tab tr").attr("align","center"); //增加<tr/> $("#but").click(function(){ var _len = $("#tab tr").length; $("#tab").append("<tr id="+_len+" align='center'>" +"<td>"+_len+"</td>"html程式碼：+"<td>小明"+"</td>" +"<td>中國"+"</td>" +"<td>24"+"</td>" +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>" +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>刪除</a></td>" +"</tr>"); }) }) //刪除<tr/> vardeltr =function(index) { var _len = $("#tab tr").length; $("tr[id='"+index+"']").remove();//刪除當前行 for(var i=index+1,j=_len;i<j;i++) { var nextTxtVal = $("#desc"+i).val(); $("tr[id=\'"+i+"\']") .replaceWith("<tr id="+(i-1)+" align='center'>" +"<td>"+(i-1)+"</td>" +"<td>小明"+"</td>" +"<td>中國"+"</td>" +"<td>24"+"</td>" +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>" +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>刪除</a></td>" +"</tr>"); } }
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../../../jquery-3.1.0.min.js"></script> <script src="球員資訊表單.js"></script> <title>球員資訊新增表單</title> </head> <body> <div style="border:2px; border-color:#00CC00; margin-left:20%; margin-top:20px"> <input type="button" id="but" value="增加"/> </div> <table id="tab" border="1" width="60%" align="center" style="margin-top:20px"> <tr> <td width="20%">序號</td> <td>姓名</td> <td>國家</td> <td>年齡</td> <td>描述</td> <td>操作</td> </tr> </table> </body> </html>目前效果還不錯，下一步將進行jQuery進行json資料讀寫進表單
參考部落格如下：
http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html