📌  相关文章
📜  如何使用 jquery 每个函数在表中追加行 - Javascript (1)

📅  最后修改于: 2023-12-03 14:51:58.653000             🧑  作者: Mango

如何使用 jQuery 在表格中追加行

本文将介绍如何使用 jQuery 中的 append() 函数在一个表格中追加新的行。

HTML 表格准备

首先，我们需要准备一个 HTML 表格供我们添加行。

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

这个表格包括一个包括两列的表头，和两条包括名字和年龄的数据行。

追加行

现在我们可以使用 jQuery 的 append() 函数向表格中添加新的一行。

$("#myTable tbody").append("<tr><td>Bob</td><td>40</td></tr>");

这段代码首先选择了位于 #myTable 元素中的 tbody 元素，然后使用 .append() 来添加一行 HTML 代码。这行代码包括一个 tr 元素和两个 td 元素，它们包含了新的姓名和年龄数据。

现在，我们可以在表格中看到新增的行。完整的示例代码如下所示。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#addRowButton").click(function() {
          $("#myTable tbody").append("<tr><td>Bob</td><td>40</td></tr>");
        });
      });
    </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>
        <tr>
          <td>Jane</td>
          <td>25</td>
        </tr>
      </tbody>
    </table>
    <button id="addRowButton">Add Row</button>
  </body>
</html>
结论

现在你已经知道如何使用 jQuery 的 append() 函数向 HTML 表格中追加新行。这可以让我们轻松处理大多数的动态数据集。