如何在JQuery可增删行表格中实现全删后启用按钮？

嘿，我来帮你搞定这个需求！结合你现有的jQuery表格代码，要实现当某个产品的所有行都被删除时，重新启用对应的添加按钮，我们可以通过给按钮和删除按钮绑定产品标识、删除后统计剩余行数的方式来实现，具体步骤和代码如下：

第一步：给添加按钮和删除按钮添加产品标识 #

首先，给每个添加按钮加上data-product属性，用来标记对应的产品类型；同时在生成表格行的删除按钮上也加上相同的data-product属性，这样删除时能精准关联到对应的添加按钮：

<!-- 示例添加按钮 -->
<button class="btn btn-primary btn-sm" data-product="product2">添加Product 2</button>
<button class="btn btn-primary btn-sm" data-product="product3">添加Product 3</button>
<button class="btn btn-primary btn-sm" data-product="product4">添加Product 4</button>

第二步：完善添加按钮的点击逻辑（ourClickDispatcher） #

在处理添加按钮点击的函数里，我们需要给Product 2/3的按钮添加禁用逻辑（符合“仅能添加一次”的需求），同时生成带产品标识的删除按钮：

function ourClickDispatcher(e) {
  const $btn = $(e.target);
  const productType = $btn.data('product');
  let productText;

  // 匹配对应产品文本，并处理按钮禁用
  switch(productType) {
    case 'product2':
      productText = 'Product 2';
      // 添加后禁用按钮，避免重复添加
      $btn.prop('disabled', true);
      break;
    case 'product3':
      productText = 'Product 3';
      $btn.prop('disabled', true);
      break;
    case 'product4':
      productText = 'Product 4';
      // Product4可多次添加，无需禁用按钮
      break;
  }

  // 生成新行（可根据你的实际表格结构调整）
  const newRow = `
    <tr>
      <td>${productText}</td>
      <td><button class="btn btn-danger btn-sm deleteMe" data-product="${productType}">×</button></td>
    </tr>
  `;
  $('#tableProd').append(newRow);
}

第三步：修改删除行的逻辑（deleteRow） #

删除行之后，我们需要统计当前表格中对应产品的剩余行数，如果剩余行数为0，就重新启用对应的添加按钮：

function deleteRow(e) {
  e.preventDefault();
  const $deleteBtn = $(e.target).closest('.deleteMe');
  const productType = $deleteBtn.data('product');
  const $row = $deleteBtn.closest('tr');
  
  // 删除当前行
  $row.remove();

  // 统计表格中该产品的剩余行数
  const remainingRows = $('#tableProd tr').filter(function() {
    return $(this).find('.deleteMe').data('product') === productType;
  }).length;

  // 找到对应的添加按钮
  const $addBtn = $(`.btn.btn-primary.btn-sm[data-product="${productType}"]`);
  
  // 如果剩余行数为0，启用按钮
  if (remainingRows === 0) {
    $addBtn.prop('disabled', false);
  }
}

关键逻辑说明 #

• 产品标识关联：通过data-product属性，让添加按钮和对应的表格行、删除按钮建立关联，确保操作的准确性
• Product 2/3的特殊处理：添加后立即禁用按钮，删除所有对应行后重新启用，完美符合“仅能添加一次”的需求（删除后可再次添加）
• Product 4的处理：因为允许多次添加，按钮默认保持启用状态，即使所有行都被删除，也会确保按钮处于可用状态

内容的提问来源于stack exchange，提问作者Carol.Kar