HTML多条件筛选模板需适配三处：form的name须与后端参数严格一致（如vendor非brand）、tbody数据提取应优先用data-field属性而非列索引、空值判断须显式处理（如deptVal === ""而非仅deptVal）。
现成 HTML 多条件筛选模板不能直接“套用”，必须按数据结构、字段语义和交互逻辑做三处关键适配：form 的 name 命名、tbody 行内数据提取方式、以及空值处理逻辑。否则一改字段名或加个下拉多选，过滤就失效。
form 的 name 必须和后端参数严格对齐
模板里写 <input name="brand">，但你的 API 实际接收的是 ?vendor=apple，那 FormData 就永远传不出去。别改 JS 去映射，直接改 HTML 的 name 属性。
-
name值不能带方括号（如brand[]），FormData 不识别，后端收不到数组 - 价格区间必须拆成两个独立
name：price_min和price_max，不要合并成一个price_range - 多选 checkbox 必须共用同一个
name（如name="category"），浏览器会自动提交所有选中项 - 如果后端要求枚举值（如
status=active），前端<option value="active"></option>里的value必须和后端定义完全一致，不能写中文显示文本
tbody 行数据提取要对应列顺序或 data- 属性
模板常假设 row.cells[0] 是姓名、row.cells[1] 是部门，但你表格的 HTML 结构可能不同——比如加了操作列、隐藏列，或用了 <td data-field="name"> 存真实字段名。硬套索引会错位。<ul>
<li>优先用 <code>data- 属性定位：给每列 <td data-field="user_name">张三</td>，JS 里用 row.querySelector('[data-field="user_name"]').textContent
row.cells.length 是否稳定；动态插入列或服务端渲染差异会导致 cells[2] 指向错误字段row.cells[i].innerText，它会合并换行和多余空格；用 .textContent.trim().replace(/\s+/g, ' ') 预清洗parseFloat() 或 Date.parse() 转换，否则 "100" > "20" 会返回 false
空值判断必须显式跳过，不能靠 falsy 简写
模板里常见 if (deptVal && cellDept !== deptVal) return false，但当 deptVal 是 "0" 或 "false" 字符串时，整个条件被跳过，导致误筛。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是显式比对是否为空字符串：
deptVal === "" || cellDept === deptVal - 对于数字输入框，空值可能是
""或null，统一用String(deptVal).trim() === ""判断 - 多选
select[multiple]的值是数组，空选择返回空数组[]，不是""，需用Array.isArray(val) && val.length === 0 - checkbox 只有勾选才出现在 FormData 中，未勾选时
formData.get("is_active")返回null，不能直接== false
最易被忽略的是：所有输入控件必须在同一个 <form></form> 内，且不能被 display: none 或 visibility: hidden 隐藏——否则 FormData 会跳过它们，即使 DOM 存在。动态显示/隐藏筛选项时，用 hidden 属性或 opacity: 0 替代。
