jquery - 尝试克隆没有数据的 html 下拉列表(tbody)

Question

我有一个下拉列表表，我试图通过单击按钮来复制该表 (tbody)。我让它复制，但数据被传递了。这是一个使用 ASP.NET Framework 的 MVC 应用程序。在没有数据传递以及 ID 递增 1 的情况下，我该如何做到这一点。 这是我的 HTML 代码:

<div id="AddImpactDiv" class="row" style="background-color: rgb(240,240,240); padding: 20px;">
    <div class="col-xs-12">
        <table id="AddImpactTable" style="width:100%">
            <tbody id="AddImpactBody">
                <tr>
                    <td style="width:33.3%" data-name="ImpactType">
                        Impact Type:
                    </td>
                    <td style="width:33.3%" data-name="ImpactStatement">
                        Impact Statement:
                    </td>
                    <td style="width:33.3%" data-name="Impact">
                        Impact:
                    </td>
                </tr>
                <tr>
                    <td data-name="ImpactTypeDD">
                        <div class="col-xs-12" id="ImpactTypeDiv" data-url="@Url.Action("GetImpactType", "Aspects")">
                            @Html.DropDownListFor(model => model.ImpactType, Model.ImpactTypeList, new { @class = "form-control req-field", @required = "required" })
                        </div>
                    </td>
                    <td data-name="ImpactStatementDD">
                        <div class="col-xs-12" id="ImpactDiv" data-url="@Url.Action("GetImpact", "Aspects")">
                            @Html.DropDownListFor(model => model.Impact, Model.ImpactList, new { @class = "form-control req-field", @required = "required" })
                        </div>
                    </td>
                    <td data-name="ImpactDD">
                        <div class="col-xs-12" id="FrequencyDiv" data-url="@Url.Action("GetFrequency", "Aspects")">
                            @Html.DropDownListFor(model => model.Frequency, Model.FrequencyList, new { @class = "form-control req-field", @required = "required" })
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="33%"></td>
                    <td width="16.7%" data-name="Consequence">
                        <div style="padding-left:15px">
                            <p align="left">Consequence Score: </p>
                        </div>
                        <div class="col-xs-5" style="padding-top:7px" id="ConsequenceScoreDiv" data-url="@Url.Action("GetConsequenceScore", "Aspects")">
                            @Html.DropDownListFor(model => model.Consequence, Model.ConsequenceList, new { @class = "form-control req-field", @required = "required" })
                        </div>
                    </td>
                    <td width="16.7%" data-name="Frequency">
                        <div style="padding-left:15px">
                            <p align="left">Impact: </p>
                        </div>
                        <div class="col-xs-5" style="padding-top:7px" id="FrequencyScoreDiv" data-url="@Url.Action("GetFrequencyScore", "Aspects")">
                            @Html.DropDownListFor(model => model.Frequency, Model.FrequencyList, new { @class = "form-control req-field", @required = "required" })
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-xs-2">
        <button id="addImpact" type="button" class="form-control btn btn-primary">Add Impact</button>
    </div>
</div>

和我的 Jquery:

    $("#addImpact").click(function () {
    $("#AddImpactTable").clone().insertAfter("#AddImpactTable");
});

Answer 1

我不建议使用 jQuery 克隆您的表。这将使您的客户端代码不必要地困惑和骇人听闻。如果您继续沿着这条路线前进:

1. 本应是唯一的 HTML 元素 ID 不会是

2. 您需要对克隆的菜单字段的名称执行其他操作，以使它们以特定方式回发到 Controller

首先:我将从更改传递到 Razor 代码中的模型开始。你想要一个 IList<MyImpactBizObj>或 IEnumerable<MyImpactBizObj> - 列表中的第一项将是实际对象，其数据将按您所拥有的方式呈现，然后列表中的其他项目是具有默认值的空替代品。

第二:对于呈现“多项目表单”的实际 Razor 代码，需要遵循 Phil Haack 必读教程中规定的指南 MVC model binding to a list

第三:每次单击“添加影响”按钮时，POST 回 MyImpactConroller.EditImpacts()也许你有一个隐藏的字段，你的提交按钮操纵它来传递你的表单所需的长度，所以它可以用正确数量的项目重新呈现。

因此， Controller 签名可能是: MyImpactConroller.EditImpacts(int formLength, IList<MyImpactBizObj> items) 如果您的 Controller 逻辑注意到 formLength 中的值它知道简单地重新渲染现有的网格，否则，如果它检测到您正在保存您的工作.. 然后处理发布的 items

“添加影响”按钮可以是具有不同值的提交按钮。您必须在 google 上搜索如何响应同一表单上的不同 sumbit 按钮，但是，这是可以做到的。

---

更新 - 切换上面的第 2 步和第 3 步，在第 3 步中使用不同的建议

---