table对象中的insertRow与deleteRow使用示例

在JavaScript中，如果你是在使用HTML DOM来操作表格（`

`），那么`insertRow`和`deleteRow`方法是非常有用的。这里提供一个简单的示例，展示如何在一个表格中插入和删除行。

### HTML 示例

首先，假设我们有如下的HTML表格：

<table id="myTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>40</td>
  </tr>
</table>

<button onclick="addRow()">Add Row</button>
<button onclick="deleteRow()">Delete Row</button>

### JavaScript 示例

然后，我们可以编写JavaScript函数来使用`insertRow`和`deleteRow`方法：

function addRow() {
  // 获取表格引用
  var table = document.getElementById("myTable");

  // 插入行应该在表格的末尾，所以获取行数
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  // 插入单元格
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  // 为单元格添加一些文本
  cell1.innerHTML = "New";
  cell2.innerHTML = "Row";
  cell3.innerHTML = rowCount;
}

function deleteRow() {
  // 获取表格引用
  var table = document.getElementById("myTable");

  // 检查是否有行可以删除
  if (table.rows.length > 3) { // 假设我们不删除表头
    // 删除最后一行
    table.deleteRow(table.rows.length - 1);
  }
}

在这个示例中，`addRow`函数在表格的末尾添加一个新行，并为该行的每个单元格添加了一些文本。`deleteRow`函数则检查表格是否有多于三行（包括表头），如果是，则删除最后一行。注意，这里我们假设表头（`

`或``作为第一行）不应该被删除。

这些函数通过按钮的点击事件触发，但你也可以根据需要以其他方式调用它们。

---