我在应用程序中构建了一个表,当我单击"删除"时,该表将删除提交时删除的行后面的所有行.这意味着,用户只需删除一行,就可以看到表的外观,但当它在post操作中点击viewmodel时,后续的行就不包括在内.

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

我将此示例设置回更简化的版本,其中删除操作似乎运行良好,但在点击控制器时,viewModel中不包含任何后续值.

这是HTML表格

                <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>

谢谢你的帮助.

推荐答案

删除行时,所有后续行的索引都是错误的,需要在删除时重新索引其余行.例如,如果你删除了索引为3的行,然后又删除了第0-2行和第4-6行,那么第4-6行将被忽略,因为没有索引3,为了解决这个问题,你需要在删除后重新索引表单字段上的id和name属性,此外,你应该考虑在function中使用constlet,因为var应该用于全局变量,最后,当您在代码中混合使用javascript和jquery时,我在您的帖子中添加了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);
             
        });
        
    }

Javascript相关问答推荐

为什么从liveWire info js代码传递数组我出现错误?

从实时数据库(Firebase)上的子类别读取数据

Angular:动画不启动

Next.js(react)使用moment或不使用日期和时间格式

PrivateRoute不是路由组件错误

为什么当我解析一个promise时,输出处于挂起状态?

如何让npx在windows中运行js脚本?

在带有背景图像和圆形的div中添加长方体阴影时的重影线

为什么Mutations 观察器用微任务队列而不是macrotask队列处理?

Javascript json定制

使用ThreeJ渲染的形状具有抖动/模糊的边缘

对路由DOM嵌套路由作出react

第二次更新文本输入字段后,Reaction崩溃

JavaScript不重定向配置的PATH

TinyMCE 6导致Data:Image对象通过提供的脚本过度上载

向数组中的对象添加键而不改变原始变量

Jexl to LowerCase()和Replace()

如何检测当前是否没有按下键盘上的键?

使用props 将VUE 3组件导入JS文件

无法向甜甜圈图表上的ChartJSImage添加可见标签