HTML表格无原生筛选功能，Excel风格筛选需JS+CSS实现；核心是解耦逻辑与UI，动态生成浮层、绑定列头、去重排序唯一值、兼容定位与性能优化。
HTML表格本身不支持原生筛选下拉菜单
纯 HTML <table> 没有内置的列筛选功能，更不会自动渲染类似 Excel 的小箭头（▼）和下拉面板。你看到的“Excel 风格筛选”效果，一定是靠 JavaScript + CSS 实现的，不是 <th> 或 <td> 自带行为。
常见错误是直接给 <th> 加 onclick 或塞个 <select>，结果点击错位、选项不联动、无法多选或状态不持久——根本原因是没把“筛选逻辑”和“UI 表现”解耦。
- 真正可用的方案：用 JS 动态生成筛选面板（浮层），绑定到对应列 header 上
- 必须监听 click 事件并阻止默认冒泡，否则点下拉时可能触发表格行选中或滚动
- 筛选项列表要基于该列所有唯一值生成，但需去空、去重、按原始顺序或字典序排（Excel 默认按出现顺序）
用原生 JS 实现最小可行筛选 UI（无框架依赖）
核心是三件事：渲染下拉图标、点击显示浮动菜单、过滤 <tbody> 行。不需要第三方库，但要注意 DOM 定位和样式隔离。
示例关键片段：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const th = document.querySelector('th[data-col="name"]');
th.innerHTML += ' <span class="filter-icon">▼</span>';
th.addEventListener('click', (e) => {
if (!e.target.classList.contains('filter-icon')) return;
const rect = th.getBoundingClientRect();
// 浮层定位需考虑滚动偏移
const panel = document.getElementById('filter-panel');
panel.style.left = rect.left + 'px';
panel.style.top = (rect.bottom + window.scrollY) + 'px';
panel.style.display = 'block';
});
-
data-col属性比 class 更适合标识列，避免类名冲突 - 浮层
<div id="filter-panel">必须用position: absolute，且父容器不能是overflow: hidden - 筛选项 checkbox 要用
data-value存原始值，而不是 innerText，防止空格或 HTML 实体干扰 - 过滤时用
Array.from(rows).forEach()而非rows.forEach()，因为rows是 HTMLCollection，没有 forEach 方法
兼容性与性能容易被忽略的点
在 IE11 或旧版 Safari 上，getBoundingClientRect() 返回值可能不含 x/y，只认 left/top；而大量行（>1000）实时过滤会导致卡顿——这些不是“功能 bug”，而是上线后才暴露的硬伤。
- 浮层定位推荐用
left/top+window.scrollX/Y，比getBoundingClientRect().x兼容性更好 - 对长表格做节流：连续点击筛选项时，延迟 200ms 再执行过滤，避免中间态闪烁
- 如果列含日期或数字，不要直接按字符串比较：
new Date(a) > new Date(b)或parseFloat(a) > parseFloat(b) - 移动端需额外处理：touchstart 替代 click、加
user-select: none防止误选文字、下拉面板宽度自适应屏幕
别碰 <datalist> 或 <select multiple> 来模拟筛选
有人尝试用 <datalist> 绑定 input 做搜索式筛选，或用 <select multiple> 叠在 th 上——这两种方式都会破坏语义、键盘导航失效、无法响应鼠标悬停高亮，而且 iOS Safari 对 <select multiple> 支持极差。
-
<datalist>只提供输入建议，不提供“已选状态反馈”，也无法多选 -
<select multiple>在桌面端会弹出原生下拉框，遮挡表格内容；在移动端直接全屏弹出，体验断裂 - 真正的筛选 UI 必须能：显示已勾选项数量（如 “3 项已选”）、支持取消全选、保留上次筛选状态
- 最简替代：用
<div contenteditable="false">模拟可点击区域，内部放<label><input type="checkbox"></label>结构
筛选逻辑越接近 Excel 的“仅显示匹配行+顶部保留筛选器状态”，越需要控制 DOM 更新粒度。别指望一次写完就跑通所有场景——列类型（文本/数字/日期）、空值处理、跨列组合筛选，每个都是独立坑。
