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

在这篇文章中，我们将学习如何使用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 () { // Add row button click event$ ("#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); }); // Remove row button click event$ (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 () { // Add row button click event using 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"); }); // Remove row button click event$ (document).on("click", ".removeBtn", function () {
             $(this).closest("tr").remove(); }); // Example 2: Add row using 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); }); // Example 3: Add row before a specific row using 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); }); // Example 4: Add row after a specific row using 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>