js如何動態新增表格
阿新 • • 發佈：2019-01-05
要引入·1.4以上的版本jquery<html> <head> <title>Add table</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <body> <table border="1px" id="targetTable"> <tr border="1px"> <td>序號</td> <td>姓名</td> <td>年齡</td> <td>生日</td> <td>備註</td> </tr> <tr id="model" style="display:none" border="1px"> <td></td> <td><input type="text" name="username"></td> <td><input type="text" name="age"></td> <td><input type="text" name="birthday"></td> <td><input type="text" name="note"><span onclick="del(this)">刪除</span></td> </tr> </table> <br> <br> 使用者輸入表單： 姓名<input type="text" name="u_username"><br> 年齡<input type="text" name="u_age"><br> 生日<input type="text" name="u_birthday"><br> 備註<input type="text" name="u_note"><br> <button onclick="add()" style="font-size:12px">新增</button> </body> <html> <script> function del(obj){ //alert($(obj).closest("tr").attr("outerHTML")); //$(obj).closest("tr").attr("outerHTML","") $(obj).closest("tr").remove(); resetSequenceNum(); } function add(){ //獲取表單的值 var u_username = $("input[name='u_username']").val(); var u_age = $("input[name='u_age']").val(); var u_birthday = $("input[name='u_birthday']").val(); var u_note = $("input[name='u_note']").val(); //alert(u_username); //判斷表單的值是否為空 if(u_username=="" || u_username==undefined){ alert("使用者姓名不能為空"); $("input[name='u_username']").focus(); return false; } //快取要賦值的內容，避免多次查詢，提高效率 var trstr = $("#model").attr("outerHTML"); //alert(trstr); //複製最後一行的程式碼新增到表的最後一行 $("#targetTable tr").last().after(trstr); //$("#targetTable").find("tr").last().after(trstr); //讓最後一行顯示出來，而不是隱藏 //$("#targetTable tr").last().css("display","block");會出現瀏覽器相容的問題，在ff中顯示不正常 $("#targetTable tr").last().css("display",""); //賦值 var target = $("#targetTable tr").last().find("td"); target.find("input[name='username']").val(u_username); target.find("input[name='age']").val(u_age); target.find("input[name='birthday']").val(u_birthday); target.find("input[name='note']").val(u_note); resetValue(); resetSequenceNum(); } //清空表單的值 function resetValue(){ $("input[name='u_username']").val(""); $("input[name='u_age']").val(""); $("input[name='u_birthday']").val(""); $("input[name='u_note']").val(""); } //重新設定序號 function resetSequenceNum(){ var num=0; $("#targetTable tr").each(function(index,dom){ if(index!=0){ $(dom).find("td").first().html(num); num++; } }); } </script>