程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> jquery動態生成表單行-jquery 添加一行表單,無法添加到 末尾

jquery動態生成表單行-jquery 添加一行表單,無法添加到 末尾

編輯:編程綜合問答
jquery 添加一行表單,無法添加到 末尾
 ![圖片說明](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為空 
    });
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved