前端新建表格自动生成id

在前端新建表格时，可以使用 JavaScript 自动生成 ID。可以在代码中使用一个计数器量，每次新建一行数据时将计数器加1，然后将这个计数器的值作为 ID 赋给新建的行。

以下是一个例代码：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

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

<script>
  var counter = 1;

  function addRow() {
    var tableBody = document.getElementById('table-body');
    var newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td>${counter}</td>
      <td><input type="text" name="name"></td>
      <td><input type="number" name="age"></td>
    `;
    tableBody.appendChild(newRow);
    counter++;
  }
</script>

在这个示例代码中，我们使用一个变量 `counter` 来记录已经新建的行数，并将其作为 ID 赋给新建的行。在点击 `Add Row` 按钮时，会调用 `addRow` 函数，该函数会创建一个新的 `tr` 元素，并将其添加到表格的 `tbody` 中。注意，在新建的行中使用了模板字符串来动态生成 HTML 代码。