基于jQuery实现选中Tab内表格搜索后动态计算Total值

核心修正点 #

之前的代码未限定计算范围到当前选中的Tab，我们需要先通过labdb元素的value获取目标Tab的ID，再在该Tab内部筛选未隐藏（notHide类）的行进行计算。

修正后的代码实现 #

假设你的HTML结构如下（可根据实际情况调整选择器）：

<!-- 存储当前选中Tab ID的元素 -->
<input type="hidden" id="labdb" value="active-tab-id">

<!-- Tab内容容器 -->
<div id="active-tab-id" class="tab-pane">
  <table>
    <tr class="notHide">
      <td class="price">29.99</td>
      <td class="quantity">3</td>
    </tr>
    <!-- 更多表格行 -->
  </table>
</div>

<!-- 显示总计的元素 -->
<span id="total-amount">0.00</span>

<!-- 搜索框 -->
<input type="text" id="search-box" placeholder="搜索...">

对应的jQuery代码：

// 监听搜索输入，执行过滤与总计计算
$('#search-box').on('input', function() {
  // 保留你原有的搜索过滤逻辑：给匹配/不匹配的行添加notHide/toHide类
  // ...（你的原有过滤代码）

  // 触发总计计算
  updateTabTotal();
});

// 计算并更新指定Tab内的总计
function updateTabTotal() {
  const activeTabId = $('#labdb').val();
  let total = 0;

  // 仅在当前选中的Tab内，遍历未隐藏的行
  $(`#${activeTabId} tr.notHide`).each(function() {
    // 提取价格与数量，处理非数字情况
    const price = parseFloat($(this).find('.price').text()) || 0;
    const quantity = parseInt($(this).find('.quantity').text()) || 0;
    total += price * quantity;
  });

  // 更新页面上的总计显示，保留两位小数
  $('#total-amount').text(total.toFixed(2));
}

关键说明 #

1. 范围限定：通过$(#${activeTabId})精准锁定当前Tab容器，避免跨Tab计算
2. 筛选有效行：结合.notHide类，只统计搜索后显示的行
3. 容错处理：用|| 0处理价格/数量为空或非数字的情况，防止出现NaN
4. 复用性：将计算逻辑抽成独立函数，后续切换Tab时也可直接调用该函数更新总计

内容的提问来源于stack exchange，提问作者Sourc3w