HTML5原生<table>无内置筛选排序功能，因纯语义化、无API、不维护状态；需JS实现：简易筛选用textContent遍历+display控制，排序宜转数组后sort()重绘；复杂需求应选DataTable.js等库。
HTML5 本身不提供内置的表格筛选或排序功能——<table> 只负责结构化展示，交互能力必须靠 JavaScript 实现。
为什么原生 <table> 无法直接筛选排序
HTML5 的 <table> 是纯语义化标签，没有 API、不响应用户操作、也不维护数据状态。所谓“嵌入表格”只是把数据渲染成 HTML，后续所有筛选、排序、分页都得自己写逻辑或引入库。
- 浏览器不会自动监听点击表头触发排序
-
<input type="search">输入内容后，不会自动过滤<tr>行 - 即使加了
contenteditable，也无法保证数据与视图同步
用原生 JS 实现简易筛选（无依赖）
适合几十行以内的静态表格，避免引入框架的轻量场景。关键点：获取输入值 → 遍历 <tbody> 的 <tr> → 检查每行文本是否包含关键词 → 切换 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 排序容易出错，推荐先从表格中读取数据为数组，排序后再重绘 <tbody>。这样逻辑清晰、可测试、也便于扩展多列排序。
立即学习“前端免费学习笔记（深入）”；
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，筛选排序逻辑放在前端还是后端，直接影响首屏速度、内存占用和结果一致性。别默认“前端做”，先看数据量和更新频率。
