使用JQuery將一組行動態添加到表中的最佳方法是什么？

Question

我有一個使用MVC的下表，該表顯示了用戶擁有的項目數。

 <table border = "1" id="tblItems">
            <%
                var itemnum = 1;
                foreach (var item in Model.Items)
            {%>

                <tr>
                    <td colspan="2" bgcolor="Silver"><strong>Item#<%=itemnum%></strong></td>
                    <td><%=Html.ActionLink("Delete", "DeleteItem", "Item", new { id = item.ID })%></td>

                </tr>
                <tr>
                    <td><strong>Name:</strong></td>
                    <td><%=Html.TextBox("ItemName_" + itemnum, item.Name)%></td>
                </tr>
                <tr>
                    <td><strong>Description:</strong></td>
                    <td><%=Html.TextBox("ItemDescription_" + itemnum, item.Description)%></td>
                </tr>


                <%itemnum++;
           } %>
        </table>

我將有一個按鈕，它將添加新項目，該項目將動態添加相同的結構。

另外，如何為每個輸入控件分配唯一的ID？ 在我的控制器中，我需要遍歷項目總數，並通過Request.Form.Get（“ Name_” + i）從每個輸入控件中獲取一個值。

關於使用JQuery做到這一點的最佳方法的任何想法？

感謝所有的建議！

Answer 1

您可以使用jQuery復制最后一行：

$("#tblItems tr:last").clone().appendTo("#tblItems");

但這將以與最后一行相同的名稱保留您的inputs ，而不是一個好的即用型解決方案。 您可以添加一些廣泛的jQuery操作來重命名輸入，或者，如Dan Diplo所指出的，有一些jQuery擴展可以為您完成此操作。

Answer 2

用戶（那么大的數字）:)

看一下jqote（一個jquery模板庫）。 很小，可以按照您上面提到的做。 實際上，這是一個只做您想做的事的小例子：

http://hackingon.net/post/jQuery-client-side-templates-with-jqote-and-AspNet-MVC.aspx

祝您好運-我成功地使用了它。

吉姆

Answer 3

您可以使用.clone（）方法在原始jQuery中執行此操作，但是正如Chris Pebble指出的那樣，它不會重命名元素名稱和ID。 但是，有幾個jQuery插件可幫助簡化此過程，因此請查看：

http://plugins.jquery.com/project/dupeIt

“ dupeIt是一個jquery插件，允許您一鍵復制和刪除DOM元素及其子元素。dupeIt通過添加迭代編號來巧妙地重命名重復的元素，例如，“ txt_mytextfield”重復項將是“ txt_mytextfield2”。

http://plugins.jquery.com/project/clonefield

“ jQuery.cloneField是一個插件，可為您提供簡單，動態的表單字段（或其他任何DOM元素）復制和刪除。”