deleteRow有時刪除右行，有時不刪除Javascript

Question

我有桌子 在每一行的末尾都有一個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 .rows 。

相反，請考慮將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>元素的子級，因此必須是將其從中刪除的父級。

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/

Answer 2

為什么不這樣做呢？ 使用jQuery並不難添加到現有文件/站點中。

HTML：

<table id="my_table" cellspacing="0" cellpadding="0">
  <tr>
    <td>Custom0</td>
    <td><span title="my title text" id="1" class="someclass">X</span></td>
  </tr>
  <tr>
    <td>Custom1</td>
    <td><span title="my title text" id="2" class="someclass">X</span></td>
  </tr>
</table>

JavaScript的：

$('.someclass').on('click', function() {
  $(this).parent().parent().remove();
});