![圖片說明](http://img.ask.csdn.net/upload/201502/11/1423664440_145410.png)
想每次在表單的末尾新生成新的一行,但每次都是在表單的開始位置插入新生成的行,剛開始玩jquery,哪位能指導一下?多謝。
代碼如下:
var jq = $.noConflict();
//另外一種
jq(function() {
jq("#addOneRow").click(function() {
var tempTr = jq("tr:first").next().clone(true);
jq("tr:last").after(tempTr);
jq("#create:last > td > #name").val("");//新添加行name為空
jq("#create:last > td > #address").val("");//新添加行address為空
});
jq(".delOneRow").click(function() {
alert("tr="+jq("tr").length)
if (jq("tr").length <3) {
alert("至少保留一行!");
} else {
if (confirm("確認刪除?")) {
jq(this).parent().parent().remove();
}
}
});
});
頁面代碼:
<spring:url value="/insertForm/insertForm.html" var="formUrl" />
<form:form modelAttribute="fm" action="${fn:escapeXml(formUrl)}"
method="get" class="form-horizontal" id="form1">
<fieldset>
<table border="1">
<tr>
<td>產品名稱</td>
<td>價格</td>
<td>數量</td>
<td>類型</td>
<td>聯系人</td>
<td>進貨日期</td>
<td>其他</td>
</tr>
<tr id="create">
<td>姓名:</td>
<td><input type="text" id="name" name="name" /></td>
<td>地址:</td>
<td><input type="text" id="address" name="address" /></td>
<td><input type="button" class="delOneRow" value="刪除" /></td>
</tr>
</table>
<input type="button" id="addOneRow" value="添加一行" />
<button type="submit" >提交</button>
會的請指點一下,多謝
改成下面這樣,原來你加的是最後一行,但一直清空的是第一行。所以造成錯覺加在第一行了
jq("#addOneRow").click(function() {
var tempTr = jq("tr:first").next().clone(true);
jq("tr:last").after(tempTr);
jq("tr:last > td > #name").val("");//新添加行name為空
jq("tr:last > td > #address").val("");//新添加行address為空
});