HTML无法实现动态表格多条件筛选，必须由JavaScript驱动；原生search输入框需JS监听事件才能生效；FormData是最稳的条件采集方式；多条件“与”逻辑须单次判断；防抖是必选项。
HTML 本身不能实现动态表格多条件筛选——所有“筛选”行为必须由 JavaScript 驱动；所谓“HTML 表格”，只是结构容器，真正在运行的是 JS 对 tr 元素的显隐控制或对后端接口的参数组装。
为什么直接写
原生 search 输入框不绑定任何数据源，也不会自动遍历 tbody tr。没 JS 监听 input 或 change 事件，它就只是一个带 × 按钮的文本框。
- 常见错误：把筛选逻辑写在按钮
onclick里，但没e.preventDefault()，一点击表单就刷新页面 - 更隐蔽的问题：用
innerText提取单元格内容，遇到换行、空格、textContent+trim() - 数值类条件（如价格区间）若不做
parseFloat()转换，'100' 会返回true，导致逻辑错乱
FormData 是最稳的条件采集方式
别手动遍历 document.querySelectorAll('[name]') 拼对象——容易漏掉 checkbox、搞错 select[multiple]、忽略 disabled 状态。
- 把所有筛选项包进一个
，哪怕只是前端过滤也这么干 - 同名
checkbox（如name="tag"）被选中多个时，new FormData(form)会自动收集全部值，不用额外处理 - 读取时用
Object.fromEntries(formData.entries())，得到形如{ tag: "vue", status: "active" }的对象，空值天然被跳过（entries()不含未选中的项） - 注意：
name="price_min[]"这种 PHP 风格命名在原生 HTML/JS 中无效，FormData完全不识别方括号
多条件“与”逻辑必须单次判断，不能链式 filter()
写成 rows.filter(byName).filter(byDept).filter(byStatus) 看似清晰，实则危险：中间某次 filter 把某行筛掉了，后续条件就再没机会作用于它，结果漏行。
- 正确做法是遍历每行一次，对每个条件单独算布尔值，再用
&&合并：if (matchesName && matchesDept && matchesStatus) { show = true; } - 每个条件默认为
true（即“不限制”），避免某个输入为空时整行被误隐藏 - 精确匹配（如“部门=市场部”）别用
includes()，应清洗文本后用===：cell.textContent.trim().replace(/\s+/g, ' ') === input.value.trim().replace(/\s+/g, ' ') - 如果表格数据来自后端且字段是枚举（如
role: "admin"），优先用data-role="admin"存真实值，比依赖显示文字可靠得多
防抖不是可选项，是必选项
用户在 input 里连敲 “张三丰”，若每次按键都触发一次全量过滤，移动端会明显卡顿，且中间几次计算完全浪费。
- 给所有筛选输入框共用一个防抖后的回调函数，比如
debouncedFilter() - 回调内统一读取所有条件：
const dept = form.elements.dept.value;，而不是每个input单独绑input事件再各自执行过滤 - 防抖时间设为
200ms左右足够，太短起不到作用，太长会让用户觉得响应迟钝 - 特别注意：防抖函数必须能取消上一次未完成的定时器，否则快速切换输入框可能导致状态错乱
真正难的不是写对一行 tr.style.display = show ? '' : 'none'，而是确保所有条件字段的 name 和后端 API 参数名严格一致、所有空值被正确跳过、所有文本清洗逻辑统一、所有输入事件被集中管控——漏掉其中任一环，筛选就会在某个边界场景下静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
