HTML 表格 点击增加一行 自动添加行号并且刷新行号

可以通过 JavaScript 实现在 HTML 表格中点击“增加一行”按钮时，自动添加行号并刷新行号。实现的步骤如下：

1. HTML 代码中添加一个表格和一个“增加一行”按钮，如下所示：

<table id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

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

2. 在 JavaScript 中定义一个函数 `addRow()` ，用于在表格中添加一行，并更新行号。示例代码如下：

function addRow() {
  // 获取表格对象和 tbody 对象
  var table = document.getElementById("myTable");
  var tbody = table.getElementsByTagName("tbody")[0];
  
  // 创建新行和新单元格
  var newRow = tbody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  var newCell1 = newRow.insertCell(1);
  var newCell2 = newRow.insertCell(2);
  
  // 获取当前行数
  var rowCount = tbody.rows.length;
  
  // 设置新行的单元格内容和行号
  newCell0.innerHTML = rowCount;
  newCell1.innerHTML = "";
  newCell2.innerHTML = "";
  
  // 更新所有行的行号
  for (var i = 1; i < rowCount; i++) {
    table.rows[i].cells[0].innerHTML = i;
  }
}

3. 在 HTML 中绑定“增加一行”按钮的点击事件为 `addRow()` 函数。示例代码如下：

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

这样，当点击“增加一行”按钮时，会自动在表格中添加一行，并更新所有行的行号。