使用jQuery根据状态列隐藏同级行并更新父行的可见子项计数

AI 小北

2026-10-10

特殊同级表格过滤计数完整实现

前置修正：优化非活跃行隐藏逻辑

你原有的隐藏逻辑存在两个问题：

会误隐藏不含Active文本的父行、表头行
:contains是模糊匹配，可能误匹配名称列包含Active的行
修正后的代码：

// 仅隐藏状态非Active的子行、独立节点，排除表头和父行
$(".myTable > tbody > tr").not(":first, .parent").filter(function() {
  return $(this).find("td:first").text().trim() !== "Active";
}).hide();

实现父行计数更新与显隐控制

代码完全基于你给出的同级节点规则实现，不会修改原有表格结构，不影响其他运行中的JS逻辑：

// 遍历所有父行处理
$(".myTable > tbody > tr.parent").each(function() {
  // 获取当前父行对应的所有子行（截止到下一个父行/表头）
  const $childRows = $(this).nextUntil("tr.parent, tr:has(td:contains('Status'))");
  // 统计可见的活跃子行数量
  const activeChildCount = $childRows.filter(":visible").length;

  if (activeChildCount === 0) {
    // 无活跃子项直接隐藏父行
    $(this).hide();
  } else {
    // 更新父行计数：保留原有子项总数，更新活跃数
    const $statusCol = $(this).find("td:first");
    const originText = $statusCol.text().trim();
    // 提取原有子项总数
    const totalMatch = originText.match(/\((\d+)=>/);
    const totalCount = totalMatch ? totalMatch[1] : $childRows.length;
    // 重写状态列文本
    $statusCol.text(`Parent (${totalCount}=>${activeChildCount})`);
    $(this).show();
  }
});