javascript - 使用 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？在我的 Controller 中，我需要循环遍历项目总数，并通过 Request.Form.Get("Name_"+ i); 从每个输入控件获取一个值。

关于使用 JQuery 执行此操作的最佳方法有什么想法吗？

感谢大家的建议!

Answer 1

您可以使用 jQuery 复制最后一行:

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

但这会以与最后一行相同的名称继承您的输入，这不是一个很好的开箱即用的解决方案。您可以添加一些extensive jQuery manipulation重新命名输入，或者，正如 Dan Diplo 指出的那样，有一些 jQuery 扩展可以为您执行此操作。