原生html表格需用javascript实现点击表头选中整列：监听th的click事件，通过e.target.cellindex获取列索引，结合colspan构建列映射数组以准确覆盖物理列范围，遍历所有tr（含thead/tbody）为对应cells添加样式，并同步aria-selected与键盘焦点支持。
点击表头选中整列数据
HTML 原生表格没有「点击列选中」功能，必须靠 JavaScript 捕获 click 事件并手动高亮对应 td 和 th。关键不是加 class，而是准确识别「哪一列」——得靠 cellIndex，不是靠 data-* 属性或 CSS 类名，否则跨行合并（colspan）会出错。
常见错误现象：
– 点击后高亮错列（尤其有 colspan 或 rowspan 的表）
– 第一列点不中（表头用了 thead + tbody 分离，但脚本只遍历了 tbody tr）
– 多次点击切换失效（没清掉上一次的选中状态）
- 监听
th的click，用e.target.cellIndex拿列索引 - 遍历所有
tr（包括thead和tbody中的），对每个tr.cells[i]添加选中样式 - 用
cells集合而非querySelectorAll('td, th')，它自动跳过被colspan覆盖的“空位” - 避免用
nth-childCSS 选择器模拟——动态增删行时会错位
用 CSS 实现无 JS 的视觉反馈（有限场景）
如果只要「鼠标悬停时高亮整列」，不用 JS 更稳：用 :has() + th:hover 向下影响同列单元格。但注意浏览器兼容性——:has() 在 Safari 15.4+、Chrome 105+ 才稳定支持，旧版 Edge 或微信内置浏览器直接不生效。
使用场景：仅需 hover 效果、不需「保持选中态」、且能接受部分用户看不到效果。
立即学习“前端免费学习笔记（深入）”；
- CSS 写法示例：
table th:hover { background: #eef; }<br>table th:hover ~ th, table th:hover ~ td { background: #eef; }<br>/* 上面这行不行 —— sibling 选择器无法跨 <code>tbody</code> */<br>table:has(th:hover) td:nth-child(1) { background: #eef; } /* ❌ 错，列号写死 */<br>table:has(th:nth-child(2):hover) td:nth-child(2),<br>table:has(th:nth-child(2):hover) th:nth-child(2) { background: #eef; } - 每列要单独写一组规则，列数多时维护成本高
-
nth-child(n)的n必须和表头cellIndex + 1严格对应，中间加一列就全乱
处理 colspan 和动态表格的坑
真实表格常有合并单元格，比如第一行表头 th[colspan="2"] 占两列，后面行却分两列填数据。这时点这个 th，该选中哪几列？逻辑必须明确：按「该 th 覆盖的物理列范围」选中，而不是只选它自己所在的逻辑列。
容易踩的坑：
– 直接用 cellIndex 当列号，忽略 colspan 导致漏列
– 用 getBoundingClientRect() 计算位置再比对，精度受缩放、字体渲染影响，不可靠
- 正确做法：遍历
table.rows[0].cells，累加每个cell.colSpan，构建列映射数组，例如[0,1,1,2,3]表示第 2、3 列都属于第 1 个表头 - 点击时查映射数组，拿到实际覆盖的列范围
[start, end)，再对每行按范围取cells - 动态插入行时，必须重新计算映射——不能只缓存一次
保持选中态与键盘可访问性
纯视觉高亮不够，用户可能用 Tab 键聚焦到表头，再按空格选中；或屏幕阅读器需要知道「当前列已选中」。原生 aria- 属性不支持列级状态，得自己加 aria-selected="true" 并同步更新。
性能影响：大表格（比如 100 行 × 50 列）每次点击遍历全部单元格会卡顿，应避免重复 setAttribute，用 class 切换 + CSS 层叠更轻量。
- 给被点击的
th加aria-selected="true"，其他th设为"false" - 用
classList.toggle()替代setAttribute('class', ...)，避免重排 - 键盘支持：给
th加tabindex="0"，监听keydown捕获Space或Enter - 别忘了用
outline: none时补上自定义焦点样式，否则键盘用户找不到当前在哪
事情说清了就结束。最麻烦的是 colspan 处理和键盘焦点同步，这两处一漏，用户要么点不准，要么残障用户根本用不了。
