如何使用 jQuery 动态添加/删除表格行?

jqueryweb developmentfront end technology

在本文中，我们将学习如何使用 jQuery(一个流行的 JavaScript 库)并借助点击事件监听器动态添加或删除表格行。

表格是 Web 开发中常用的元素，尤其是在处理表格数据或动态内容时。动态添加或删除表格行是一项强大的功能，允许用户实时与数据交互。

让我们通过一些示例来了解如何实现这一点。

示例 1

在本例中，我们将创建一个包含一些行数据的 HTML 表格元素。我们将在表格底部添加一个新行按钮，并在表格的每一行中分别添加一个"删除"按钮，用于从表格中删除该行。

文件名:index.html

<html lang="en">
   <head>
      <title>How to Dynamically Add/Remove Table Rows using jQuery?</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <style>
         table {
            border-collapse: collapse;
            width: 100%;
         }
         th,
         td {
            text-align: left;
            padding: 8px;
         }
         tr:nth-child(even) {
            background-color: #f2f2f2;
         }
         th {
            background-color: #4caf50;
            color: white;
         }
      </style>
   </head>
   <body>
      <table id="myTable">
         <thead>
            <tr>
               <th>Name</th>
               <th>Email</th>
               <th>Actions</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>John Doe</td>
               <td>johndoe@example.com</td>
               <td><button class="removeBtn">Remove</button></td>
            </tr>
         </tbody>
      </table>
      <button id="addRowBtn">Add Row</button>

      <script>
        $(document).ready(function () {
           // 添加行按钮点击事件
           $("#addRowBtn").click(function () {
              var newRow =
              "<tr>" +
              "<td>New Name</td>" +
              "<td>New Email</td>" +
              '<td><button class="removeBtn">Remove</button></td>' +
              "</tr>";
              $("#myTable tbody").append(newRow);
           });
           // 删除行按钮点击事件
           $(document).on("click", ".removeBtn", function () {
              $(this).closest("tr").remove();
           });
         });
      </script>
   </body>
</html>

示例 2

在本例中，我们将遵循上述代码结构，并使用 4 种不同的方法(例如 appendTo、prepend、before 和 after)生成一些随机的电子邮件地址和姓名。

文件名:index.html

<html lang="en">
<head>
   <title>How to Dynamically Add/Remove Table Rows using jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      table {
         border-collapse: collapse;
         width: 100%;
      }
      th,
      td {
         text-align: left;
         padding: 8px;
      }
      tr:nth-child(even) {
         background-color: #f2f2f2;
      }

      th {
         background-color: #4caf50;
         color: white;
      }
   </style>
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Actions</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>johndoe@example.com</td>
            <td><button class="removeBtn">Remove</button></td>
         </tr>
      </tbody>
   </table>
   <button id="addRowBtnAppend">Add Row using appendto</button>
   <button id="addRowBtnPrepend">Add Row using prepend</button>
   <button id="addRowBtnBefore">Add Row using before</button>
   <button id="addRowBtnAfter">Add Row  using after</button>

   <script>
      $(document).ready(function () {
         // 使用 appendTo() 添加行按钮单击事件
         $("#addRowBtnAppend").click(function () {
            var newRow =
            "<tr>" +
            "<td>New Name</td>" +
            "<td>New Email</td>" +
            '<td><button class="removeBtn">Remove</button></td>' +
            "</tr>";
            $(newRow).appendTo("#myTable tbody");
         });

         // 删除行按钮点击事件
         $(document).on("click", ".removeBtn", function () {
            $(this).closest("tr").remove();
         });

         // 示例 2:使用 prepend() 添加行
         $("#addRowBtnPrepend").click(function () {
            var newRow =
            "<tr>" +
            "<td>New Name</td>" +
            "<td>New Email</td>" +
            '<td><button class="removeBtn">Remove</button></td>' +
            "</tr>";
 
            $("#myTable tbody").prepend(newRow);
         });

         // 示例 3:使用 before() 在特定行之前添加行
         $("#addRowBtnBefore").click(function () {
         var newRow =
            "<tr>" +
            "<td>New Name</td>" +
            "<td>New Email</td>" +
            '<td><button class="removeBtn">Remove</button></td>' +
            "</tr>";

            $("#myTable tbody tr:first").before(newRow);
         });

         // 示例 4:使用 after() 在特定行后添加行
         $("#addRowBtnAfter").click(function () {
            var newRow =
            "<tr>" +
            "<td>New Name</td>" +
            "<td>New Email</td>" +
            '<td><button class="removeBtn">Remove</button></td>' +
            "</tr>";

            $("#myTable tbody tr:last").after(newRow);
         });
      });
   </script>
</body>
</html>