2

我有一张桌子。在每一行的末尾都有一个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/

4

2 回答 2

4

您已经对行号进行了硬编码，因此在第一次删除后它们不同步。该<table>元素的.rows属性是“live”，因此删除一个意味着数字不再与您的 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>元素，因此它必须是从中删除它的父元素。

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/

于 2013-01-15T18:01:00.780 回答
0

为什么不做这样的事情？使用 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();
});
于 2013-01-15T18:13:27.903 回答