最稳方案是用 FormData 一次性读取表单筛选条件，自动处理 checkbox 多选、select[multiple]、disabled 跳过等；需确保 form 包裹所有控件、name 与后端参数名严格一致；读取用 Object.fromEntries(new FormData(form).entries())；空值需用 !== undefined 判断；前端过滤应单次遍历+布尔表达式，数值字段须显式转换类型，数据源统一用 JS 原始数组而非 DOM。
用 FormData 一次性读取所有筛选条件最稳
别手动遍历 input、拼对象、判断 type，容易漏掉 checkbox 多选或 select[multiple]。原生 FormData 自动处理：未选中的 checkbox 不提交、同名多值自动收集、disabled 项跳过、空字符串不传——前提是表单结构正确。
关键点：
-
<form></form>必须包裹所有筛选控件，不能用<div class="filter-form"> <li> <code>name属性必须和后端接收参数名完全一致，比如后端要category，就写name="category"，别写name="filter_category"或name="category[]"（方括号在纯 HTML/JS 中无效） - 读取时统一用
Object.fromEntries(new FormData(form).entries())，返回形如{ category: "phone", price_min: "100" }的对象 - 注意空值：用户没填
price_min，FormData就不会包含它，所以后端或 JS 过滤逻辑里得做if (params.price_min !== undefined)判断，而不是if (params.price_min)（因为 "0" 或 "00" 会被当成 false）
前端实时过滤时，filter() 回调必须合并所有条件
小数据量（≤1000 行）可前端过滤，但别写成链式 .filter().filter().filter()，也别嵌套 if (a) if (b) if (c)。前者反复创建新数组，后者容易漏掉“全部满足”的语义；正确做法是单次遍历 + 单个布尔表达式。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const matches = rows.map(row => {
const name = row.cells[0].textContent.trim();
const dept = row.cells[1].dataset.dept;
const status = row.cells[2].textContent.trim();
<p>const nameOk = !filters.name || name.toLowerCase().includes(filters.name.toLowerCase());
const deptOk = !filters.dept || dept === filters.dept;
const statusOk = !filters.status || status === filters.status;</p><p>return nameOk && deptOk && statusOk;
});要点：
- 每个条件默认为
true（即“不限制”），避免空输入导致整行被误筛掉 - 数值或枚举字段优先比对
data-*属性值（如data-dept="tech"），而非单元格显示文本，避免因格式、空格、HTML 标签干扰匹配 - 用
Array.from(document.querySelectorAll('tbody tr'))而不是直接遍历NodeList，防止 DOM 变动引发索引错乱
input 事件监听要防抖，且所有框共用一个回调
多个搜索框各自绑 input 并立即执行过滤，会导致竞态：用户快速改两个框，后触发的会覆盖前一次结果，看起来像“只响应最后一次输入”。必须把所有条件读取和过滤逻辑收拢到一个函数里，并加防抖。
实操建议：
- 用
input事件（不是keyup或change），它能捕获粘贴、IME 上屏、剪切等全部输入场景 - 加 200ms 防抖，移动端尤其明显；可用
setTimeout+clearTimeout实现，别依赖第三方库 - 所有筛选框共享同一个事件回调，比如
document.querySelectorAll('.filter-input').forEach(el => el.addEventListener('input', debounce(onFilterChange, 200))) - 回调内统一读取当前所有控件值，再执行一次完整过滤，不拆开处理
数值类条件必须显式转类型，否则字符串比较会出错
比如价格范围筛选：<input name="price_min" type="number">，如果直接用 value 做比较，"100" 是 <code>true，结果完全错乱。
正确做法：
- 数值字段一律用
parseFloat(input.value)或parseInt(input.value, 10)转换，转换失败时设为NaN或null，并在过滤逻辑中跳过或设为默认边界值 - 空值判断不能只靠
if (input.value)，因为"0"、"0.0"会被当成 false；应先转换再判断!isNaN(minVal) - 涉及范围比较（如
min ≤ price ≤ max）时，确保三个值都是数字类型，且min和max都存在才启用该条件
真正容易被忽略的是：表格渲染数据源必须和筛选逻辑一致。如果你把原始数据存 JS 数组里（推荐），过滤就跑这个数组；如果直接操作 DOM 行，textContent 会混入隐藏列、换行符、样式文本，匹配结果不可控。导出按钮、分页总数、统计文案——所有这些都得基于当前筛选后的数据集，不是原始 DOM。
