Question

我的代码是具有3个输入字段的简单表单。用户填写完所有内容并按下按钮后，它将在表中添加一行，其中包含输入数据以及索引号。像这样：

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

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

    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

grtz，

Botert

Answer 1

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

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

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

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

删除其他行后为表行赋予新索引

1 个答案: