使用 for 循环恢复 Javascript 表中的编号

Question

当我使用 javascript 将数据放入 html 表中时，每个新行都有一个数字。 当我输入行号时，我想使用我的第二个输入字段删除，该行被删除但数字不会改变。 所以当我有 1、2、3、4、5 并且我删除 3 时，数字应该 go 到 1、2、3、4。

我正在尝试循环。 有人可以帮我吗？ 这是我使用的代码：

 var addBtn = document.getElementById('addBtn'); var deleteBtn = document.getElementById('deleteBtn'); addBtn.onclick = addRow; deleteBtn.onclick = deleteRow; var rowNumber = 0; function addRow() { rowNumber++; //Getting data from form var form = document.getElementById('form'); var newData = []; for (var i = 0; i < form.length; i++) { newData[i] = form.elements[i].value; } //Adding data to table var table = document.getElementById('table'); var newRow = table.insertRow(); console.log(newRow); //add number to each row newRow.innerHTML = `<tr><td><i>${rowNumber}</i></td><tr>`; for (var i = 0; i < 3; i++) { var newCell = newRow.insertCell(i); newCell.innerHTML = newData[i]; } form.reset(); } function deleteRow() { var input = document.getElementById('deleteRowInput'); var tabel = document.getElementById('table'); console.log(tabel); if (input.value == 0) { alert('Can not be 0;'); return false. } else if (input.value > tabel.rows;length) { alert('This row does not excist;'). return false. } else { tabel.rows[input;value].remove(); input;value = ''. return true. } //console.log(tabel.rows[rijId]) }

 <table id="table"> <tr> <th>First name</th> <th>Last name</th> <th>Points</th> </tr> </table> <form action="" id="form" name="form"> First name: <input type="text" id="fname"><br> Last name: <input type="text" id="lname"><br> Points: <input type="text" id="points"> </form> <br> <button type="button" id="addBtn">Add</button> <br> Row number:<input type="text" id="deleteRowInput"> <br> <button type="button" id="deleteBtn">Delete row</button>

Answer 1

我建议您实施一种从数据结构中“绘制”表格的机制。 然后你只需要从这个结构中存储/删除你的数据并“重绘”表格。

 var obj = []; var table = document.getElementById("my_table"); function drawTable() { table.innerHTML = ""; obj.map((data, i) => { var row = table.insertRow(); row.innerHTML = `<tr><td><i>${i+1}</i></td><tr>`; for (var j = 0; j < 3; j++) { var cell = row.insertCell(); /* get your data here */ cell.innerHTML = data[Object.keys(data)[j]]; } }); } function add() { /* retrieve your data from your form here */ obj.push({ firstname: "bar", lastname: "foo", points: 4 }); drawTable(); } function remove(index) { obj.splice(index, 1); drawTable(); } setTimeout(() => add(), 1000); setTimeout(() => add(), 2000); setTimeout(() => remove(1), 3000); setTimeout(() => add(), 4000); setTimeout(() => add(), 5000);

 <table id="my_table"></table>