javascript - 删除行后提交动态表单的问题

Question

我有一个用表格构建的表单，我希望能够向该表单添加或删除行并提交。

这是我的表单的 js.fiddle

https://jsfiddle.net/oyvk1whx/

<form asp-controller="Institution" asp-action="AccountCategoryFees" method="post" class="form-horizontal">
    <div asp-validation-summary="All" class="text-danger"></div>
    <input asp-for="AccountCategoryId" type="hidden"/>

    <table class="table table-responsive" id="feeTable">
        <thead>
            <tr>
                <td><strong>Description</strong></td>
                <td><strong>Price</strong></td>
                <td><strong>Delete</strong></td>
            </tr>
        </thead>

        @for (int j = 0; j < Model.Fees.Count; j++)
        {
            <tr>
                <td>
                    <input asp-for="Fees[j].Description" />
                </td>
                <td>
                    <span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input asp-for="Fees[j].Price" type="number" min="0.00" step="0.0001" max="2500" class="form-control" />
                </td>
                <td>
                    <input type="button" class="deleteButton btn btn-md btn-danger" value="Delete">
                </td>
            </tr>
        }

        <tfoot>
            <tr>
                <td colspan="5" style="text-align: left;">
                    <input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
                </td>
            </tr>
            <tr></tr>
        </tfoot>
    </table>

    <div class="modal-footer" style="padding:0px;">
        <button type="submit" class="btn bg-primary">Save</button>
    </div>
</form>


<script>
        var feeTypes = @Html.Raw(Json.Serialize(@Model.Fees));
</script>

<script>
        var counter = @Model.Fees.Count;

        $('#feeTable').on("click", "#addrow", function () {

            var cols = "<tr>";
            cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
            cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
            cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
            cols += '</tr>';

            $("#feeTable").append(cols);
            counter++;
        });

        $(document).on("click", ".deleteButton", function (event) {
            $(this).closest("tr").remove();
        });
</script>

该脚本适用于添加新行和删除行。问题是当我删除表单不再正确提交的行时，删除行之后的所有行都将被忽略。

我相信这是因为 id 断开连接，因为模型绑定(bind)程序无法解析它。

有什么建议吗？

Answer 1

I believe this is because of the disconnect in the ids, since there is a gap the model binder cannot parse it

我建议尽可能避免在名称和/或 ID 中使用方括号，并在服务器端解决您的问题。在任何情况下，如果您需要重新排列 ID 和 NAME 属性，您可以简单地在每个表行上循环(因为在服务器端您将只处理名称，您只能重新排列这些):

$('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
    $(row).find('[id^=Fees_]').each(function(cIdx, col) {
        // col.id = col.id.replace(/\d+/, rIdx);
        col.name = col.name.replace(/\d+/, rIdx);
    });
 })

var counter = 0;

$('#feeTable').on("click", "#addrow", function () {

    var cols = "<tr>";
    cols += '<td><input id="Fees_' + counter + '__Description" name="Fees[' + counter + '].Description"/></td>';
    cols += '<td><span style="position: absolute; margin-left: 2px; margin-top: 8px;">$</span><input id="Fees_' + counter + '__Price" name="Fees[' + counter + '].Price" type="number" min="0.00" step="0.0001" max="2500" value="0" class="form-control"/></td>';
    cols += '<td><input type="button" class="deleteButton btn btn-md btn-danger" value="Delete"></td>';
    cols += '</tr>';

    $("#feeTable").append(cols);
    counter++;
});

$(document).on("click", ".deleteButton", function (event) {
    $(this).closest("tr").remove();
    $('#feeTable tr:has(input.deleteButton)').each(function(rIdx, row) {
        $(row).find('[id^=Fees_]').each(function(cIdx, col) {
            // col.id = col.id.replace(/\d+/, rIdx);
            col.name = col.name.replace(/\d+/, rIdx);
        });
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-responsive" id="feeTable">
    <thead>
    <tr>
        <td><strong>Description</strong></td>
        <td><strong>Price</strong></td>
        <td><strong>Delete</strong></td>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="5" style="text-align: left;">
            <input type="button" class="btn btn-lg btn-block " id="addrow" style="color:gray" value="Add Fee" />
        </td>
    </tr>
    <tr></tr>
    </tfoot>
</table>

<button type="submit" class="btn bg-primary">Save</button>