如何在表格 HTML 中添加一行

在 HTML 中添加一行到表格中可以通过两种方式实现：使用 JavaScript 动态添加行， 或在 HTML 代码中直接添加新行。

在 HTML 代码中添加新行

为了在 HTML 代码中添加新行到表格，需要在代码中添加一个新的 <tr> 元素。以下是在表格 HTML 代码中添加一行的示例：

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
    </tr>
    <tr>
      <td>新行列1</td>
      <td>新行列2</td>
      <td>新行列3</td>
    </tr>
  </tbody>
</table>

使用 JavaScript 动态添加行

要使用 JavaScript 动态添加行，可以使用以下步骤：

1. 获取表格元素：使用 document.getElementById() 或类似的方法获取表格元素。

2. 创建新行：使用 document.createElement() 函数创建一个新的 <tr> 元素。

3. 对新行添加单元格：使用 appendChild() 函数将新的 <td> 元素添加到新行中。

4. 将新行添加到表格中：使用 appendChild() 函数将新行添加到表格的 <tbody> 或 <thead> 元素中。

以下是使用 JavaScript 动态添加新行的示例：

<table id="my-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
    </tr>
  </tbody>
</table>

<script>
  // 获取表格元素
  var table = document.getElementById('my-table');

  // 创建新行
  var newRow = document.createElement('tr');

  // 添加单元格
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  var td3 = document.createElement('td');

  td1.appendChild(document.createTextNode('新行列1'));
  td2.appendChild(document.createTextNode('新行列2'));
  td3.appendChild(document.createTextNode('新行列3'));

  newRow.appendChild(td1);
  newRow.appendChild(td2);
  newRow.appendChild(td3);

  // 将新行添加到表格中
  var tbody = table.getElementsByTagName('tbody')[0];
  tbody.appendChild(newRow);
</script>

总结

无论是在 HTML 代码中直接添加新行还是使用 JavaScript 动态添加行，都能实现在表格 HTML 中添加一行。根据具体应用场景，选择较为适合的方法即可。