使用 jQuery 为 table 添加行

在网页开发中，动态地为表格（table）添加行是一项常见需求。借助 jQuery 强大的功能，我们可以轻松实现这一操作。

确保页面引入了 jQuery 库。这是使用 jQuery 各种功能的基础，可通过 CDN 或本地文件引入。

假设我们有一个简单的 HTML 表格结构：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<button id="addRowButton">添加行</button>

接下来，使用 jQuery 代码实现添加行功能。通过以下代码，我们为按钮绑定一个点击事件，当按钮被点击时，会在表格的 tbody 中添加一行：

$(document).ready(function() {
  $('#addRowButton').click(function() {
    $('#myTable tbody').append('<tr><td>新姓名</td><td>25</td></tr>');
  });
});

在这段代码中，$(document).ready() 函数确保页面 DOM 加载完成后才执行后续代码。$('#addRowButton').click() 绑定了按钮的点击事件。$('#myTable tbody').append() 则是关键操作，它在指定表格的 tbody 元素内追加了一个新的行（tr 元素），行内包含两个单元格（td 元素），分别填充了示例数据。

如果希望添加的行数据更具动态性，可以结合用户输入。例如，通过输入框获取用户输入的姓名和年龄：

<input type="text" id="nameInput" placeholder="输入姓名">
<input type="text" id="ageInput" placeholder="输入年龄">
<button id="addDynamicRowButton">添加动态行</button>

然后，修改 jQuery 代码：

$(document).ready(function() {
  $('#addDynamicRowButton').click(function() {
    var name = $('#nameInput').val();
    var age = $('#ageInput').val();
    $('#myTable tbody').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
  });
});

这段代码从输入框获取用户输入的值，然后将其插入到新添加行的单元格中。

使用 jQuery 为 table 添加行不仅简单高效，还能极大提升用户体验。通过灵活运用 jQuery 的 DOM 操作方法，开发者可以根据具体业务需求实现复杂的表格动态功能，为网页增添更多交互性和实用性。无论是小型项目还是大型应用，这一技巧都能发挥重要作用。