JavaScript实现表格添加行

在网页开发中，动态操作表格是一项常见的需求。其中，使用JavaScript实现表格添加行功能可以为用户带来更灵活的交互体验。

我们需要一个基本的HTML表格结构。例如：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<button onclick="addRow()">添加行</button>

这里定义了一个带有表头的表格，tbody部分为空，用于后续添加行。还有一个按钮，点击它将触发添加行的操作。

接下来，就是核心的JavaScript代码部分。

function addRow() {
  const table = document.getElementById('myTable');
  const newRow = table.insertRow();

  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  const cell3 = newRow.insertCell(2);

  cell1.innerHTML = '新姓名';
  cell2.innerHTML = '25';
  cell3.innerHTML = '新城市';
}

在addRow函数中，首先通过getElementById获取到表格元素。然后使用insertRow方法在表格中插入一个新行。接着，通过新行的insertCell方法分别在新行中插入三个单元格。最后，为每个单元格设置相应的内容。

这种实现方式虽然简单直接，但在实际应用中可能需要更灵活的操作。比如，从用户输入中获取数据并填充到新行。我们可以修改代码如下：

<input type="text" id="nameInput" placeholder="姓名">
<input type="number" id="ageInput" placeholder="年龄">
<input type="text" id="cityInput" placeholder="城市">
<button onclick="addCustomRow()">添加自定义行</button>

function addCustomRow() {
  const table = document.getElementById('myTable');
  const newRow = table.insertRow();

  const nameInput = document.getElementById('nameInput').value;
  const ageInput = document.getElementById('ageInput').value;
  const cityInput = document.getElementById('cityInput').value;

  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  const cell3 = newRow.insertCell(2);

  cell1.innerHTML = nameInput;
  cell2.innerHTML = ageInput;
  cell3.innerHTML = cityInput;
}

这样，用户在输入框中输入数据，点击按钮后，表格就会添加带有用户自定义数据的新行。

通过JavaScript实现表格添加行功能，为网页表格的动态操作提供了便利，极大地提升了用户体验和页面的交互性，在数据展示和管理等方面有着广泛的应用。