HTML表格怎么实现数据多条件筛选-html教程-PHP中文网

小数据量（≤1000行）宜前端JS实时过滤，遍历tbody行并用统一布尔表达式匹配非空条件；大数据须后端分页查询，前端通过原生form+FormData传参，name属性须与API参数严格一致。

html表格怎么实现数据多条件筛选

小数据量（≤1000 行）直接用 JS 前端过滤最简单；真实业务中数据来自后端、需分页或权限控制，必须走后端查询——前端只负责收参数、发请求、渲染结果。

前端实时过滤：用 `filterTable()` 一次性比对所有非空条件

别写多个 .filter() 链式调用，也别嵌套 if 判断。每行是否显示，由一个统一布尔表达式决定：

const nameMatch = !nameVal || cellName.includes(nameVal) —— 空输入视为“不限制”
const deptMatch = !deptVal || cellDept === deptVal —— 精确匹配优先用 data-dept 属性值，而非单元格文本
最终判断：row.style.display = nameMatch && deptMatch ? '' : 'none'
监听所有输入框共用同一个回调，避免竞态：改两个框时，只触发一次完整过滤

后端驱动筛选：用 + `FormData` 安全传参

不用

，必须用原生  标签包裹所有筛选控件：

name 属性必须和后端 API 的 query 参数名完全一致，比如 price_min、status

多选 checkbox 写成多个同名 ，不是 name="tag[]"（后者在纯 JS 场景下无效）
提交前用 new FormData(form) 读取，再转对象：Object.fromEntries(formData.entries())

空值自动被忽略，disabled 控件不参与提交，checkbox 未勾选也不上传——不用手动清理

防坑重点：DOM 遍历范围、文本清洗、display 还原
前端过滤时最容易出错的三个点：

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										

只遍历 tbody tr，别用 table tr，否则可能误操作表头或脚部行
单元格文本要清洗再比对：cell.textContent?.trim().replace(/[\s\uFEFF\xA0]+/g, ' ')，否则全角空格、换行、多余空格会导致 === 失败

tr.style.display = '' 不一定还原原始值（比如原来是 flex），稳妥做法是提前存 tr.dataset.originalDisplay，或统一用 classList.toggle('hidden')


复杂点不在逻辑本身，而在于边界处理：空输入怎么算、多空格怎么归一、表格结构变动后 JS 是否还能准确定位列、用户快速连输时防抖要不要加——这些细节漏掉一个，筛选就不可靠。