删除 table 行按钮删除所有后续行

Question

我有一个 table 我内置了一个应用程序，当我单击“删除”时，会删除提交时删除的行之后的所有行。这意味着 table 仅删除那一行对用户来说看起来不错，但是当它在 post 操作中点击视图模型时，不包括那些后续行。

我添加了一些非常复杂的代码，这些代码到处都是来编辑行的索引值，但最终使问题变得更加混乱，一些值替换了其他值，而另一些值则被设置为 0 .我知道必须有一个更简单的方法。

我将此示例设置回更简化的版本，其中删除似乎运行良好，但在它到达控制器时不在 viewModel 中包含任何后续值。

这里是HTMLTable

                <input type="button" value="Add" class="button is-primary" id="btnAdd" />
                <table id="tblPart" style="table-layout:fixed; width:100%;">
                    <thead>
                        <tr>
                            <th>
                                Part Number
                            </th>
                            <th>
                                Quantity
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (var i = 0; i < Model.NumberModel.Count(); i++)
                        {
                            <tr >
                                <td >
                                    @Html.TextBoxFor(modelItem => Model.NumberModel[i].PartNum, new { id = $"part{i}", required = "required", @class = "partTest" })
                                </td>
                                <td>
                                    @Html.TextBoxFor(modelItem => Model.NumberModel[i].Quantity, new { type = "number", min = "0", id = $"quantity{i}", required = "required" })
                                </td>
                                <td>
                                    <input type='button' 
                                    onclick='Remove(this)' 
                                    value='Remove' />
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

这是JS

<script>

    function Remove(button) {
        //Determine the reference of the Row using the Button.
        var row = $(button).closest("TR");
        var name = $("TD", row).eq(0).html();
        //console.log(row + name);

            
        var index = 0;
        var table = $("#tblPart")[0];
        //Delete the Table row using it's Index.
        table.deleteRow(row[0].rowIndex);

    }
        </script>

感谢您的帮助。

Answer 1

当你删除该行时，所有后续行的索引都是错误的，你需要re-index删除剩余的行。例如，如果您删除索引为 3 的行，然后您有第 0-2 行和第 4-6 行，则 4-6 将被遗漏，因为没有索引 3，要解决此问题，您需要重新索引 id 和 name 属性在删除后的表单字段上，您还应该考虑在 function 中使用 const 和 let，因为 var 应该用于全局变量，最后，我添加了 jquery 标记到您的 post，因为您在代码中混合了 javascript 和 jquery：

function Remove(button) {
        //Determine the reference of the Row using the Button.
        const row = $(button).closest("TR");
        const name = $("TD", row).eq(0).html(); //this seems unnecessary    
        let index = 0; //this seems unnecessary
        const table = $("#tblPart")[0];
        //Delete the Table row using it's Index.
        table.deleteRow(row[0].rowIndex);
        
        //re-index
        $('#tblPart tbody tr').each(function(i, el) {
             //get the form fields
             const $partnuminput = $(el).find('input[name*="PartNum"]');
             const $quantityinput = $(el).find('input[name*="Quantity"]');
             
             //use the iterator parameter of .each to set the index correctly
             $partnuminput.attr("name", $partnuminput.attr("name).replace(/\d+/g, i);
             $partnuminput.attr("id", $partnuminput.attr("id").replace(/\d+/g, i);
             $quantityinput.attr("name", $partnuminput.attr("name).replace(/\d+/g, i);
             $quantityinput.attr("id", $partnuminput.attr("id").replace(/\d+/g, i);
             
        });
        
    }

删除 table 行按钮删除所有后续行

Delete table row button removes all subsequent rows

html

javascript

model-view-controller

jquery