使用JQuery在页面中监听表格多一行少一行

可以使用 jQuery 库来监控表格多一行少一行的变化，以下是一个示例代码，演示了如何使用 jQuery 来添加/删除行，以及如何使用 MutationObserver API 来监控表格行数的变化。

页面表格

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Value 1</td>
      <td>
        <button type="button" class="deleteRow">Delete</button>
      </td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Value 2</td>
      <td>
        <button type="button" class="deleteRow">Delete</button>
      </td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td>Value 3</td>
      <td>
        <button type="button" class="deleteRow">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

script

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 监控表格行数变化 使用类选择器，也可以使用id选择器，原理一致
    let rows = $('.table tbody tr').length;
    let observer = new MutationObserver(function(mutationsList) {
      for (var mutation of mutationsList) {
        if (mutation.type == 'childList') {
          // 表格行数变化
          let currentRows = $('.table tbody tr').length;
          if (currentRows > rows) {
            // 添加新行
            console.log('A new row has been added');
          } else if (currentRows < rows) {
            // 删除行
            console.log('A row has been deleted');
          }
          // 更新变化前的行数
          rows = currentRows;
        }
      }
    });
    observer.observe($('.table tbody')[0], { childList: true });

    // 添加新行
    $('button.addRow').click(function() {
      let newRow = $('<tr><td>New row</td><td></td><td><button type="button" class="deleteRow">Delete</button></td></tr>');
      $('.table tbody').append(newRow);
    });

    // 删除行
    $('body').on('click', '.table .deleteRow', function() {
      $(this).parents('tr').remove();
    });
  });
</script>

在上面的例子中，使用 jQuery 依次执行以下步骤：
1.在 $(document).ready() 中初始化 MutationObserver 实例，来监控表格行数变化。
2.当点击“添加行”按钮时，使用 jQuery 创建新行并添加到表格中。
3.当点击“删除”按钮时，使用 jQuery 找到对应的行并从表格中删除。
同时，当表格行数发生变化时，MutationObserver 实例会响应，执行特定逻辑，例如输出日志信息。