HTML无法实现数据筛选，因其仅为标记语言，无逻辑处理能力；所有筛选均需JavaScript动态操作DOM或重绘表格。

创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

HTML 本身不提供数据筛选能力，所有前端筛选都靠 JavaScript 实现；直接写 <table> + 点击按钮就“自动筛选”是常见误解。 <h3>为什么不能只用 HTML 做筛选</h3> <p>HTML 是标记语言，只负责描述结构，不具备逻辑处理能力。所谓“HTML 筛选”，实际是用户把原始数据（比如 JSON 数组、<code><tbody> 行）交给 JS，再由 JS 动态显示/隐藏/重排 DOM 元素。 <p>常见错误现象：</p> <ul> <li>在 <code><input type="search"> 里输文字，但表格完全没反应 —— 缺少监听 input 事件和过滤逻辑

点击“筛选男”后，其他行消失但滚动条卡住或样式错乱 —— 用 display: none 隐藏却没重置容器高度或分页状态

数据量稍大（>500 行）时操作明显卡顿 —— 每次输入都全量遍历并操作 DOM，没做节流或虚拟列表

最简可行的 JS 筛选：基于 <table> 的实时文本过滤 <p>适用场景：静态表格、数据量小（</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>核心步骤：</p> <ul><li>给每行 <code><tr> 加唯一标识（如 <code>data-id 或直接读取单元格文本）

绑定 input 事件到搜索框，调用 filterRows()

filterRows() 遍历所有 <tr>（跳过 <code><thead>），检查是否包含搜索关键词（注意大小写、空格处理） <li>匹配则 <code>tr.style.display = ''，不匹配则 tr.style.display = 'none'

示例关键代码片段：

const searchInput = document.getElementById('search');
const rows = document.querySelectorAll('tbody tr');

function filterRows() {
  const keyword = searchInput.value.trim().toLowerCase();
  rows.forEach(row => {
    const text = row.textContent.toLowerCase();
    row.style.display = text.includes(keyword) ? '' : 'none';
  });
}
searchInput.addEventListener('input', filterRows);

多条件筛选（如性别 + 年龄范围）该怎么做

比单文本搜索更贴近业务，但容易陷入“if-else 堆砌”陷阱。

推荐做法：

• 把原始数据存为数组（如 const data = [{name:'张三', gender:'男', age:28}, ...]），而非仅依赖 DOM
• 用 Array.filter() 构建纯函数式筛选逻辑，避免直接操作 DOM
• 每个筛选项（下拉、滑块）变更时，重新运行 filter()，再用 renderTable(dataFiltered) 一次性重绘 <tbody> <li>注意空值处理：比如年龄滑块未设置时，该条件应被忽略，而不是筛掉所有数据</li> <p>参数差异提醒：</p> <ul> <li>用 <code>includes() 做模糊匹配，用 === 做精确匹配（如性别）
• 年龄范围用 age >= min && age ，别漏掉等号
• 若字段可能为 null 或 undefined，先做 ?? 或 || 默认值兜底

性能与兼容性容易被忽略的点

不是所有“能跑起来”的代码都适合上线。

• IE11 不支持 Array.from() 和箭头函数，需用 Babel 或手写 for 循环
• 频繁触发 input（如中文输入法）会导致卡顿，必须加 setTimeout 节流或 addEventListener('input', handler, {passive: true})
• 移动端软键盘弹起可能遮挡搜索框，建议用 position: sticky 固定搜索栏，或监听 resize 调整位置
• 如果表格有合并单元格（rowspan/colspan），用 display: none 隐藏某行会破坏布局，此时必须用 visibility: hidden + 预设高度，或彻底重构为数据驱动渲染

真实项目里，90% 的筛选卡顿不是算法问题，而是反复读写 DOM 导致的重排重绘。把“数据 → 视图”拆开，比堆砌 JS 技巧更重要。