<html> <head> <title>產品、商品組合</title> </head> <body> <form id="goodsForm"> <table class="table" border="1"> <thead> <tr> <th>檢項</th> <th>第一節</th> <th>第二節</th> <th>第三節</th> </tr> </thead> <tbody> <tr id="a"> <td class="td"></td> <td><input name="firsts"/></td> <td><input name="seconds"/></td> <td><input name="thirds"/></td> </tr> <tr> <td class="td"></td> <td><input name="firsts"/></td> <td><input name="seconds"/></td> <td><input name="thirds"/></td> </tr> </tbody> </table> <a href="javascript:;" onclick="fun()">增加一行</a> <a href="javascript:;" onclick="del()">刪除一行</a> <a href="javascript:;" id="submit">提交</a> </form> </body> <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> var i = 1; $(".td").each(function(){ $(this).html(i++); }) function fun(){ var $td = $("#a").clone(); //增加一行,克隆第一個對象 $(".table").append($td); var i = 1; $(".td").each(function(){ //增加一行后重新更新序號1,2,3...... $(this).html(i++); }) $("table tr:last").find(":input").val(''); //將尾行元素克隆來的保存的值清空 } function del(){ $("table tr:not(:first):not(:first):last").remove(); //移除最后一行,並且保留前兩行 } $("#submit").click(function () { $.ajax({ type: "POST", url: "combination", data: $('#goodsForm').serialize(), success: function (data) { alert(data) }, }); }); </script> </html>