JavaScript表格筛选：如何隐藏无匹配出版物行的年份表头

你可以在现有筛选逻辑的基础上，新增对年份表头的可见性判断即可，完整实现代码如下：

// 注意函数名和按钮onclick调用的名称保持统一
function filterSelection(thing) {
  // 重置所有行的显示状态
  $("#myTable tr").show();

  // 筛选出不匹配关键词的内容行
  const unmatchedSelector = `[name*='${thing}']`;
  const $unmatchedContentRows = $('#myTable tr:not(:has(th))').not(unmatchedSelector);
  $unmatchedContentRows.fadeOut(300);

  // 遍历每个年份表头，判断是否需要隐藏
  $('#myTable tr.header').each(function() {
    // 获取当前表头归属的所有出版物行（下一个表头之前的所有内容行）
    const $currentYearRows = $(this).nextUntil('tr.header', 'tr:not(:has(th))');
    // 判断当前年份下是否有匹配的内容行
    const hasMatchedContent = $currentYearRows.not($unmatchedContentRows).length > 0;
    // 无匹配则隐藏表头，保持和内容行一致的动画效果
    $(this).toggle(hasMatchedContent).fadeTo(300, hasMatchedContent ? 1 : 0);
  })
}

核心逻辑说明 #

• 用jQuery的nextUntil()方法定位每个年份表头对应的所有出版物行，无需额外修改现有HTML结构
• 统计每个年份下匹配筛选条件的内容行数量，数量为0时同步隐藏对应表头
• 选择器中给关键词加了单引号包裹，避免关键词包含特殊字符时出现语法错误

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