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

Question

My code is a simple form with 3 input fields. Once the user fills them all in and presses the button it will add a row to the table with the input data aswell as an index number. Like this:

https://imgur.com/g5ToOpF

im trying to give each row in a table an index number that is correct with the amount of rows inserted. This works but now I want it to update the index number when I remove one of the rows from the table.

The following function is triggered when the customer fills in an input field with the desired index number that they want to delete and then press a button.

    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);
            }
        })
    }

This works and deletes the row that the customer whats but it doesn't update the index numbers for the other rows. So when I delete row 5. My table will look like this.

https://imgur.com/Zz3sBSI

I figure I have to loop through all of the rows and set the index to the correct number again. Can anyone help me out :) ?

For the full code check:

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

grtz,

Botert

Answer 1

To answer your question, try adding the following snippet in your removeRow() function:

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

Fiddle here: https://jsfiddle.net/ufszamv4/

It's outside of the scope of the question, but consider taking a different approach to the problem. Try placing your rows in an object that has its properties removed. The goal is to simply delete a row without having to update the rest of the data.