HTML表格排序需用JavaScript实现：监听表头点击、提取比较列值、移动tbody内tr节点；NodeList无sort()方法，须转真数组；只操作tbody内tr；禁用innerHTML清空以防丢失状态；数字列需转数值排序。
HTML 表格本身不支持排序，所有排序逻辑必须由 JavaScript 实现；核心就三步：监听表头点击 → 提取并比较列值 → 用原生节点移动重排 tbody 中的 tr。
为什么直接对 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
最容易被忽略的不是语法细节，而是排序范围是否和用户预期一致：搜索过滤后点排序，该排全量数据，还是仅当前可见行？这个判断一旦写错，功能就“看起来正常，用起来错乱”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
