javascript - deleteRow 有时会删除正确的行，有时不会在 Javascript 中删除

Question

我有一张 table 。在每一行的末尾都有一个 href“X”，它删除了这一行。这很简单。现在，当您点击任何第 2 行的“X”时，它会删除第 2 行，但是当您点击第 3 行时，它会删除第 4 行。

这是我的代码:

HTML

<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>Custom0</td>
    <td><a title="my title text" id="1" href="#" class="someclass" onclick="deleteRows(0)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom1</td>
    <td> <a title="my title text" id="2" href="#" class="someclass" onclick="deleteRows(1)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom2</td>
    <td> <a title="my title text" id="3" href="#" class="someclass" onclick="deleteRows(2)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom3</td>
    <td> <a title="my title text" id="4" href="#" class="someclass" onclick="deleteRows(3)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom4</td>
    <td> <a title="my title text" id="5" href="#" class="someclass" onclick="deleteRows(4)">X</a>

    </td>
  </tr>
  <tr>
    <td>Custom5</td>
    <td> <a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(5)">X</a>

    </td>
  </tr>
</table>

和Javascript

function deleteRows(row) {
  var tbl = document.getElementById('my_table'); // table reference
  tbl.deleteRow(row);
}

你可以在这里玩:http://jsfiddle.net/nTJtv/13/

Answer 1

您对行号进行了硬编码，因此在第一次删除后它们就不同步了。 <table>元素的 .rows属性是“实时的”，所以删除一个意味着数字不再与您的 HTML 对齐。

相反，考虑传递 this.parentNode.parentNode到函数并使用它来确定要删除的行:

<a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(this.parentNode.parentNode)">X</a>

然后使用removeChild()在函数中:

function deleteRows(row) {
  var tbl = document.getElementById('my_table'); // table reference
  tbl.getElementsByTagName("tbody")[0].removeChild(row);
}

编辑:<tr>是 <tbody> 的 child 元素，因此它必须是从中移除它的父元素。

http://jsfiddle.net/nTJtv/19/

如果你真的更愿意使用 deleteRow() ，然后遍历行以找到传递给函数的行并将其删除:

function deleteRows(row) {
  var tbl = document.getElementById('my_table'); // table reference
  // Loop over the table .rows collection to find the one passed into the function
  for (var i=0; i<tbl.rows.length; i++) {
    if (row == tbl.rows[i]) {
      // And delete it
      tbl.deleteRow(i); 
      return;
    }
  } 
}

http://jsfiddle.net/nTJtv/21/