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

Question

我有这样的表:

<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>

JS代码如下:

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

}

更新: JSFIDDLE HERE

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

Answer 1

我想我会以不同的方式处理这个问题。我将这样做。也许这不是您要找的。 JSFiddle .

HTML(取出onclicks，添加一些id和类)

<button id="add" type="button">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="template">
    <td class="itemNumber">1</td>
    <td>text</td>
    <td><button class="delete" type="button">Delete</button> </td>
  </tr>    

</table>

JS

(function() {
  var template = document.getElementById("template"),
    table = document.getElementById("item_table"),
    display = template.style.display;

  document.getElementById("add").addEventListener("click", function() {
    var row = template.cloneNode(true);
    row.style.display = display;
    row.querySelector(".delete").addEventListener("click", function() {
      table.removeChild(this);
    }.bind(row));
    row.querySelector(".itemNumber").innerHTML = table.children.length - 1;
    table.appendChild(row);
  });

  template.style.display = "none";

}());