Question

我正在尝试删除表行和表列。为此，我编写了两个功能。 DelelteRow（）和DeleteColumn（）删除具有索引大于零。但是实际上应该一次删除一行或一列。有人可以修改我的代码。

DeleteRow：

function DeleteRows() {
    var tbl = document.getElementById('myTable'), 
        lastRow = tbl.rows.length - 1,           
        i;
    for (i = lastRow; i > 0; i--) {
        tbl.deleteRow(i);
    }
}

DeleteColumn：

function DeleteColumns() {
    var tbl = document.getElementById('myTable'),
        lastCol = tbl.rows[0].cells.length - 1,
        i, j;
    for (i = 0; i < tbl.rows.length; i++) {
        for (j = lastCol; j > 0; j--) {
            tbl.rows[i].deleteCell(j);
        }
    }

Answer 1

类似这样的操作将一次删除一个行/列。您的问题并不清楚，您想删除哪一行/列，但是您的代码暗示您只希望删除最后一行/列。

var delRowBtn = document.querySelector('.delRow');
delRowBtn.addEventListener('click', deleteLastRow);

var delColBtn = document.querySelector('.delCol');
delColBtn.addEventListener('click', deleteLastColumn);

var tbl = document.querySelector('table');

function deleteLastRow() {
  tbl.deleteRow(tbl.rows.length - 1);
}

function deleteLastColumn() {
  var lastCol = tbl.rows[0].cells.length - 1;
  for (var i = 0; i < tbl.rows.length; i++) {
    tbl.rows[i].deleteCell(lastCol);
  }
}

html, body {
  font-size: 24px;
}

table {
  margin-top: 30px;
}

td {
  padding: 10px;
  outline: 1px solid lightgrey;
}

<button class="delRow">Delete Row</button>
<button class="delCol">Delete Column</button>

<table>
  <tbody>
    <tr>
      <td>r0c0</td>
      <td>r0c1</td>
      <td>r0c2</td>
      <td>r0c3</td>
      <td>r0c4</td>
    </tr>
    <tr>
      <td>r1c0</td>
      <td>r1c1</td>
      <td>r1c2</td>
      <td>r1c3</td>
      <td>r1c4</td>
    </tr>
    <tr>
      <td>r2c0</td>
      <td>r2c1</td>
      <td>r2c2</td>
      <td>r2c3</td>
      <td>r2c4</td>
    </tr>
  </tbody>
</table>

如何正确删除表格单元格

1 个答案: