html5原生无内置筛选排序功能，因纯语义化、无API、不维护状态；需js实现：简易筛选用textContent遍历+display控制，排序宜转数组后sort()重绘；复杂需求应选Datatable.js等库。
html5 本身不提供内置的表格筛选或排序功能——
只负责结构化展示，交互能力必须靠 javaScript 实现。
为什么原生
无法直接筛选排序
HTML5 的
是纯语义化标签，没有 API、不响应用户操作、也不维护数据状态。所谓“嵌入表格”只是把数据渲染成 HTML，后续所有筛选、排序、分页都得自己写逻辑或引入库。
- 浏览器不会自动监听点击表头触发排序
-
行
- 即使加了
contenteditable，也无法保证数据与视图同步
用原生 JS 实现简易筛选（无依赖）
适合几十行以内的静态表格，避免引入框架的轻量场景。关键点：获取输入值 → 遍历
的
→ 检查每行文本是否包含关键词 → 切换 style.display。
const filterInput = document.getElementById('filter'); const rows = document.querySelectorAll('tbody tr'); filterInput.addEventListener('input', () => { const keyword = filterInput.value.trim().toLowerCase(); rows.forEach(row => { const text = row.textContent.toLowerCase(); row.style.display = text.includes(keyword) ? '' : 'none'; }); });
- 用
textContent 而非 innerText，避免样式影响和兼容性问题
- 注意区分大小写，统一转小写再比对
- 如果表格有分页或远程数据，这个方案会失效——它只处理当前 dom
用 Array.sort() 实现列点击排序（需先提取数据）
直接操作 DOM 排序容易出错，推荐先从表格中读取数据为数组，排序后再重绘
。这样逻辑清晰、可测试、也便于扩展多列排序。
立即学习“前端免费学习笔记（深入）”；
function sortTableByColumn(table, columnIndex, isAsc = true) { const tbody = table.querySelector('tbody'); const rows = Array.from(tbody.querySelectorAll('tr')); const data = rows.map(row => ({ element: row, value: row.cells[columnIndex].textContent.trim() })); data.sort((a, b) => { const aVal = a.value, bVal = b.value; if (aVal === bVal) return 0; return isAsc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal); }); data.forEach(item => tbody.appendChild(item.element)); }
- 用
localeCompare() 正确处理中文、数字混排（比如 “10” 会排在 “2” 后面）
- 不要用
innerHTML += ... 拼接，会导致事件监听器丢失
- 若某列是数字或日期，需提前转换类型：
number(row.cells[i].textContent) 或 new date(...)
该用什么库？别硬扛复杂需求
当表格需要服务端分页、多列排序、自定义过滤器、导出 excel、响应式展开等，原生 JS 维护成本陡增。这时候该选成熟方案：
-
DataTable.js：老牌稳定，文档全，支持 ajax 和插件生态，但体积略大（压缩后 ~70KB）
-
ag-Grid：功能极强，支持虚拟滚动和树形结构，免费版有水印，企业级项目常用
-
Tabulator：轻量（~60KB）、API 清晰、移动端友好，适合中等复杂度业务表
真正容易被忽略的是数据源头——如果你的表格数据来自 API，筛选排序逻辑放在前端还是后端，直接影响首屏速度、内存占用和结果一致性。别默认“前端做”，先看数据量和更新频率。