如何实现HTML表格的排序功能？

本文共计659个文字，预计阅读时间需要3分钟。

HTML表格本身不支持排序，所有的排序逻辑都必须通过JavaScript实现。核心步骤如下：

为什么直接对 document.querySelectorAll('tr') 调用 sort() 会失败

因为 NodeList 和 HTMLCollection 不是数组，没有 sort() 方法。浏览器通常静默忽略或抛 TypeError。

• 必须先转成真数组：Array.from(tbody.querySelectorAll('tr')) 或 [...tbody.querySelectorAll('tr')]
• 只操作 tbody 内的 tr，跳过 thead 和 tfoot，否则表头会被拖进排序队列
• 别用 innerHTML = '' 清空再拼字符串——会丢掉 input 的勾选状态、focus 位置、事件监听器

数字列排序为什么 “10” 排在 “2” 前面

这是字符串默认比较的结果："10" 为 <code>true（只比首字符）。必须显式转数值或启用数字感知比较。

• 简单场景用 parseFloat(a.cells[i].textContent) || 0，但注意 "-"、"N/A" 会得 NaN
• 更稳的方式是 new Intl.Collator('en', { numeric: true }).compare(aVal, bVal)，它能正确处理 "1"、"2"、"10"
• 若列含单位（如 "25 kg"），先正则清洗：cell.textContent.replace(/[^-\d.]/g, '')

如何安全地重排 DOM 而不丢失状态

关键不是“删了重建”，而是“移动已有节点”。appendChild() 和 insertBefore() 是唯一能保留所有 DOM 状态的操作。

立即学习“前端免费学习笔记（深入）”；

• 排序后遍历数组，对每个 row 调用 tbody.appendChild(row) 即可——浏览器自动移除原位置再插入末尾
• 想升序/降序切换？存一个 data-sort-dir="asc" 在 th 上，每次点击 toggle 它，然后在比较函数里乘 -1
• 多个表格共存时，别用全局变量记状态；用 th.dataset.tableId 绑定作用域，或直接从事件目标向上找最近的 table

最容易被忽略的不是语法细节，而是排序范围是否和用户预期一致：搜索过滤后点排序，该排全量数据，还是仅当前可见行？这个判断一旦写错，功能就“看起来正常，用起来错乱”。