javascript：添加和删除表格行，无法获得正确的编号

我有这样的桌子：

<button type="button" onclick="addRow();">Add Row</button> 
<table id="item_table" cellspacing="1" cellpadding="1" border=1>
    <tr>
        <td>No.</td>
        <td>text</td>
        <td>Action</td>
    </tr>
    <tr id="theFirstRow">
        <td class="itemNumber">1</td>
        <td>text</td>
        <td><button type="button" onclick="deleteRow(this)">Delete</button> </td>
    </tr>    

</table>

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('item_table').deleteRow(i);
}

var maxID = 0;

function getTemplateRow() {
  var x = document.getElementById("theFirstRow").cloneNode(true);
  var tbs = null;
  var lastRow = 0;
  var currentRow = 0;
  var numbering = 0;

  tbs = document.getElementsByClassName("itemNumber");
  lastRow = tbs.length - 1;
  currentRow = tbs.length;
  console.log("lastRow : " + lastRow);
  numbering = parseInt(currentRow, 10) + 1;
  console.log("numbering : " + numbering);
  x.innerHTML = x.innerHTML.replace('<td class="itemNumber">' + currentRow + '</td>', '<td class="itemNumber">' + numbering + '</td>');
  return x;
}

function addRow() {
  var t = document.getElementById("item_table");
  var rows = t.getElementsByTagName("tr");
  var r = rows[rows.length - 1];
  r.parentNode.insertBefore(getTemplateRow(), r);

}

添加行
不
文本
行动
1.
文本
删除

JS代码如下：

<button type="button" onclick="addRow();">Add Row</button> 
<table id="item_table" cellspacing="1" cellpadding="1" border=1>
    <tr>
        <td>No.</td>
        <td>text</td>
        <td>Action</td>
    </tr>
    <tr id="theFirstRow">
        <td class="itemNumber">1</td>
        <td>text</td>
        <td><button type="button" onclick="deleteRow(this)">Delete</button> </td>
    </tr>    

</table>

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('item_table').deleteRow(i);
}

var maxID = 0;

function getTemplateRow() {
  var x = document.getElementById("theFirstRow").cloneNode(true);
  var tbs = null;
  var lastRow = 0;
  var currentRow = 0;
  var numbering = 0;

  tbs = document.getElementsByClassName("itemNumber");
  lastRow = tbs.length - 1;
  currentRow = tbs.length;
  console.log("lastRow : " + lastRow);
  numbering = parseInt(currentRow, 10) + 1;
  console.log("numbering : " + numbering);
  x.innerHTML = x.innerHTML.replace('<td class="itemNumber">' + currentRow + '</td>', '<td class="itemNumber">' + numbering + '</td>');
  return x;
}

function addRow() {
  var t = document.getElementById("item_table");
  var rows = t.getElementsByTagName("tr");
  var r = rows[rows.length - 1];
  r.parentNode.insertBefore(getTemplateRow(), r);

}

函数deleteRow（行）{
var i=row.parentNode.parentNode.rowIndex；
document.getElementById（'item_table'）.deleteRow（i）；
}
var-maxID=0；
函数getTemplateRow（）{
var x=document.getElementById（“theFirstRow”）.cloneNode（true）；
var-tbs=null；
var lastRow=0；
var currentRow=0；
变量编号=0；
tbs=document.getElementsByClassName（“itemNumber”）；
lastRow=tbs.length-1；
currentRow=待定长度；
console.log（“lastRow:+lastRow”）；
编号=parseInt（当前行，10）+1；
控制台日志（“编号：”+编号）；
x、 innerHTML=x.innerHTML.replace（“”+currentRow+“”，“”+Number+“”）；
返回x；
}
函数addRow（）{
var t=document.getElementById（“项目表”）；
var rows=t.getElementsByTagName（“tr”）；
var r=行[rows.length-1]；
r、 parentNode.insertBefore（getTemplateRow（），r）；
}

更新：

---

我无法正确获取增量编号和删除行编号，当我从控制台日志检查时，编号似乎正确。任何帮助都会很好。

我想我会在这方面有所不同。我会这样做的。也许这不是你想要的

HTML（去掉onclick，添加一些ID和类）

---

谢谢，如果删除后您能正确获得编号排序，那么它将被删除perfect@ZackArgyle如果删除第0个索引处的行，则id“1”正在重复：）只需将RefreshNumber中的for循环更改为for（var i=1…而不是2）