Js 点击新增一行数据表格，并且实现表单提交

1，这里是html 代码

<form class="layui-form" id="form"> <input type="button" class="layui-btn" id="btn_addtr" value="增报价单"> <table id="dynamicTable"> <tbody> <tr> <td align="center"> <input type="text" name="NO[]" size="2" value="1" /> </td> <td align="center"> <input type="text" name="serial_number[]" /> </td> <td align="center"> <input type="text" name="product_name[]" /> </td> <td align="center"> <input type="text" name="price[]" /> </td> <td align="center"> <input type="text" name="details[]" /> </td> <td align="center"> <input type="text" name="delivery_date[]" /> </td> <td align="center"> <input type="text" name="supply_cycle[]" /> </td> <td align="center"> <input type="text" name="description[]" /> </td> <td> <input type="button" id="Button2" onClick="deltr(this)" value="删行"> </td> </tr> </tbody> </table> <input class="layui-btn" value="参与报价" type="button" id="buttonsub"> </form>

2,JS代码

<script type="text/javascript"> var count = 1; //递增的开始值 $(function () { var show_count = 20; //要显示的条数 $("#btn_addtr").click(function () { var length = $("#dynamicTable tbody tr").length; if (length < show_count) //点击时候，如果当前的数字小于递增结束的条件 { count=count+1; var tableHtml =""; tableHtml += '<tr>' +'<td><input type="text" name="NO[]" size="2" value="'+count+'" /> </td>' +'<td><input type="text" name="serial_number[]"/></td>' +'<td><input type="text" name="product_name[]"/></td>' +'<td><input type="text" name="price[]"/></td>' +'<td><input type="text" name="details[]"/></td>' +'<td><input type="text" name="delivery_date[]"/></td>' +'<td><input type="text" name="supply_cycle[]"/></td>' +'<td><input type="text" name="description[]"/></td>' +'<td><input type="button" onClick="deltr(this)" value="删行"></td>' +'</tr>'; $("#dynamicTable tbody").append(tableHtml) ; //在表格后面添加一行 }else { alert('最大行数不能超过20行'); } }); }); function deltr(opp) { var length = $("#dynamicTable tbody tr").length; if (length <= 1) { alert("至少保留一行"); } else { $(opp).parent().parent().remove();//移除当前行 } }

3，表单提交数据代码

<script> $("#buttonsub").click(function () { var data=$("#form").serialize(); $.ajax({ url:'{:url("Quote/quote_edit")}', //实际使用请改成服务端真实接口 data: data, type: "post",//方法类型 success: function(res){ layer.alert(res.msg, {icon: 6},function () { // 获得frame索引 var index = parent.layer.getFrameIndex(window.name); //关闭当前frame parent.layer.close(res.msg); parent.location.reload(); //刷新父亲对象 }); } }) }) </script>

下面我们来看看效果 name值是为了做表单提交