<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>
浙公网安备 33010602011771号