使用 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，并使用与最后一行相同的名称，这不是一个很好的开箱即用解决方案。您可以添加一些 extensive jQuery manipulation 来重命名输入，或者正如 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

"dupe是一个jquery插件，允许 你复制和删除 DOM 元素和他们的孩子一起 点击。 dupe它巧妙地重命名 通过附加重复的元素 迭代次数，例如。 “txt_mytextfield”重复将是 “txt_mytextfield2”。

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

"jQuery.cloneField 是一个插件 为您提供简单、动态的表格 字段（或任何其他 DOM 元素， 真的）复制和删除。”