HTML table 本身无数据筛选能力，所有筛选必须由 JavaScript 实现；CSS filter 仅影响视觉效果，与数据过滤无关。
HTML <table> 元素本身没有 filter 属性，CSS 的 filter 是作用于整个元素（如表格容器）的视觉效果，不是“数据筛选”功能。如果你想要的是搜索过滤、条件筛选这类交互行为，那和 CSS filter 完全无关——这是最常见的概念混淆点。
误用 CSS filter 会导致什么
有人尝试写 <table filter="name=张三"> 或给 table 加 style="filter: blur(2px)"，结果发现：前者无效（HTML 规范里没有这个属性），后者只是把整张表变模糊，数据根本没被筛选。关键区别在于：
-
filter是 CSS 属性，只影响渲染层（高斯模糊、灰度、亮度等），不改变 DOM 结构或数据可见性 - 真正做“数据筛选”，必须靠 JavaScript 控制
tr.style.display或重绘tbody内容 - Bootstrap Table、DataTables 等库的
filterBy方法，底层也是 JS 操作数据数组 + 刷新 DOM，不是靠 CSS
想实现列级条件筛选，该用什么 API
原生 JS 没有 table.filter() 这种方法。可行路径只有两条：
- 手动遍历
table.querySelectorAll("tbody tr")，对每行的cells取textContent做字符串匹配（适合 ≤500 行） - 用成熟库的筛选接口，比如 Bootstrap Table 的
filterBy：$('#myTable').bootstrapTable('filterBy', {name: ['张三', '李四']}) - 如果表格由 JS 动态生成，更推荐把原始数据存为数组，用
data.filter(row => row.age >= 18)计算，再批量重绘tbody—— 这样避免反复读 DOM，也方便加防抖
为什么直接操作 display='none' 容易出问题
看似最简方案（tr.style.display = 'none'）在真实项目中常踩三个坑：
立即学习“前端免费学习笔记（深入）”；
- 隐藏后，
tr.offsetHeight变 0，后续依赖高度的逻辑（如滚动定位、虚拟滚动）会失效 - 如果某行内有
<input>正在编辑，display: none会强制 blur，丢失焦点和未提交内容 - 用
innerHTML替换整个table会销毁所有事件监听器；正确做法是只替换tbody.innerHTML，保留thead和绑定关系
真正要解决“筛选”，得先明确：你是要视觉隐藏、DOM 移除、还是纯数据过滤后再重绘？三者成本和副作用完全不同。别被 filter 这个词带偏方向——它在 CSS 和 JS 语境下，根本不是一回事。
