时间戳

首页 > 解决方案 > 删除其他行后为表行提供新索引

javascript - 删除其他行后为表行提供新索引

问题描述

我的代码是一个带有 3 个输入字段的简单表单。一旦用户将它们全部填写并按下按钮，它将在表格中添加一行，其中包含输入数据以及索引号。像这样：

https://imgur.com/g5ToOpF

我试图给表中的每一行一个索引号，该索引号与插入的行数是正确的。这可行，但现在我希望它在我从表中删除其中一行时更新索引号。

当客户用他们想要删除的所需索引号填写输入字段然后按下按钮时，将触发以下功能。

    function removeRow() {
        let tabel = document.getElementById("tabel");
        let rows = tabel.getElementsByTagName("tr");
        let indexNumber = document.getElementById("indexnumber").value;

        Object.entries(rows).forEach(([key]) => {
            if(key === indexNumber) {
                tabel.deleteRow(indexNumber);
            }
        })
    }

这有效并删除了客户是什么的行，但它不会更新其他行的索引号。因此，当我删除第 5 行时。我的表格将如下所示。

https://imgur.com/Zz3sBSI

我想我必须遍历所有行并将索引再次设置为正确的数字。谁能帮我吗 ：） ？

对于完整的代码检查：

https://codepen.io/Botert/pen/bJLLWL

格兹，

伯特

标签： javascripthtml

解决方案

removeRow()要回答您的问题，请尝试在您的函数中添加以下代码段：

for (var i=1; i<rows.length; i++) {
  var dataRow = rows[i].children[3];
  dataRow.textContent = i;
}

在这里摆弄：https ://jsfiddle.net/ufszamv4/

这超出了问题的范围，但请考虑对问题采取不同的方法。尝试将您的行放在已删除其属性的对象中。目标是简单地删除一行，而不必更新其余数据。

推荐阅读