用jQuery轻松动态添加表格行：快速上手指南

2024-03-06 11:09:54

用jQuery轻松动态添加表格行

概述

在前端开发中，我们经常需要动态添加表格行，以显示新数据或允许用户输入。jQuery提供了一个简单的解决方案，即append()方法，让我们可以轻松地将新行追加到现有表格中。

使用append()方法

要使用append()方法添加表格行，只需将你想添加的HTML代码作为字符串传递给该方法。例如，要向#myTable的末尾添加一行，包含两个单元格，你可以使用以下代码：

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

添加内容的限制

使用append()方法添加内容时需要注意以下限制：

元素类型： 你可以添加任何类型的HTML元素，包括输入框、下拉框、按钮等。
行数： 理论上，你可以添加任意数量的行，但实际上受限于浏览器内存和性能。
数据类型： 除了HTML元素，你还可以添加纯文本、数字或其他数据类型的内容。

选择合适的方法

除了append()方法，还有其他方法可以向表格添加行，包括insertRow()方法和createTHead()和createTBody()方法。选择哪种方法取决于你的具体需求。

示例代码

以下是一个使用append()方法向表格添加行的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>

  <script>
    // 添加一行数据
    $('#myTable').append('<tr><td>Mary</td><td>25</td></tr>');
  </script>
</body>
</html>