双层表头无法自动联动筛选，因headers仅为语义属性，不触发JS行为；需手动绑定click事件，建立表头id到列索引的映射，并遍历tbody实现筛选。
双层表头本身不提供联动筛选能力，headers 属性只能标注语义归属，不能触发 JS 行为或自动过滤数据。真要实现“选中第一层表头某列 → 自动筛选第二层对应子列数据”，必须靠 JavaScript 手动绑定逻辑。
为什么 headers 无法支撑双层表头联动筛选
headers 是纯语义属性，只用于辅助技术（如屏幕阅读器）理解单元格归属，浏览器不会据此执行任何 DOM 操作、事件响应或样式变更。即使你给 <th id="sales-q1">Q1</th> 和 <th id="sales">销售额</th> 都设了 id，再在 <td headers="sales sales-q1">12000</td> 中引用，这也只是告诉读屏软件“这个数字同时属于‘销售额’和‘Q1’”，对筛选毫无作用。
常见误操作包括：
- 试图用 CSS 选择器如
[headers~="sales"]直接隐藏/显示行 —— 不生效，该属性不参与样式计算 - 期望点击
<th id="sales">后，所有headers包含"sales"的<td>自动高亮或过滤 —— 需手动监听 click 并遍历匹配 - 把
colspan/rowspan当成可编程维度，以为结构嵌套就能触发级联 —— 它们只影响渲染布局，不产生数据关系
如何用 JS 实现双层表头点击即筛选
核心是把表头 id 映射到实际数据列索引，并在点击时提取该列所有唯一值生成筛选项。假设表格结构如下：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<thead>
<tr>
<th colspan="2">销售额</th>
<th colspan="2">成本</th>
</tr>
<tr>
<th id="sales-q1">Q1</th>
<th id="sales-q2">Q2</th>
<th id="cost-q1">Q1</th>
<th id="cost-q2">Q2</th>
</tr>
</thead>
你需要：
- 预先建立映射：
const headerToColIndex = { "sales-q1": 0, "sales-q2": 1, "cost-q1": 2, "cost-q2": 3 }; - 为每个
<th id>绑定 click 事件，从event.target.id查出列索引 - 遍历
tbody tr，读取对应cells[index].textContent，收集去重后的值 - 生成下拉或弹层供用户二次筛选，或直接调用
DataTable.columns(i).search(...).draw()（若用 DataTables）
容易被忽略的结构陷阱
双层表头常导致列索引错位，尤其当使用 colspan 或 rowspan 时，cells 数组长度 ≠ 实际可视列数。例如：
- 第一行
<th colspan="2">销售额</th>→ 该行只有 2 个<th>，但第二行有 4 个 →cells索引需按第二行对齐 - 不要依赖
cellIndex：它返回的是当前<tr>内的顺序位置，不是全局列号 - 如果表格用了
<colgroup>，cols元素不参与cells计数，不能用来推导列关系
最稳妥的方式是：固定以最后一层 <tr>（即最小粒度表头行）为基准，人工维护 id → 列序号 映射表，避免运行时解析结构。
