表格分页时如何隐藏子行已被隐藏的标题行？

核心思路 #

给标题行和对应子行添加关联标记（比如data-group属性），每次分页切换完成后，遍历所有标题行，检查其对应分组下的子行是否有处于显示状态的：

• 若该分组下无任何子行显示，则隐藏标题行
• 若有至少一个子行显示，则保持标题行可见

具体实现代码 #

先给表格行加上关联标记，示例结构如下：

<table id="grouped-table">
  <tr class="title-row" data-group="group1">
    <td colspan="3">TITLE1</td>
  </tr>
  <tr class="child-row" data-group="group1">
    <td>子行1-1</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
  <tr class="child-row" data-group="group1">
    <td>子行1-2</td>
    <td>内容</td>
    <td>内容</td>
  </tr>

  <tr class="title-row" data-group="group2">
    <td colspan="3">TITLE2</td>
  </tr>
  <tr class="child-row" data-group="group2">
    <td>子行2-1</td>
    <td>内容</td>
    <td>内容</td>
  </tr>

  <tr class="title-row" data-group="group3">
    <td colspan="3">TITLE3</td>
  </tr>
  <tr class="child-row" data-group="group3">
    <td>子行3-1</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

将以下代码放在分页切换的回调函数中（比如点击分页按钮后执行）：

// 遍历所有标题行
$('.title-row').each(function() {
  const groupId = $(this).data('group');
  // 检查当前分组下是否存在可见子行
  const hasVisibleChild = $('.child-row[data-group="' + groupId + '"]:visible').length > 0;
  
  // 根据子行状态切换标题行显示/隐藏
  hasVisibleChild ? $(this).show() : $(this).hide();
});

关键细节说明 #

• 关联标记：data-group是最直观的关联方式，你也可以根据实际结构调整（比如通过标题行的相邻元素判断子行范围，但data属性容错性更高）
• 触发时机：必须在分页操作完成后执行这段代码，确保子行的显示状态已更新
• 性能优化：如果表格行数较多，可提前缓存选择器（比如将$('.child-row')存入变量），避免重复DOM查询

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