如何实现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（只比首字符）。必须显式转数值或启用数字感知比较。