html表格排序需用javascript实现，因nodelist和htmlcollection无sort()方法，须转为数组；应仅对tbody内行排序，避免表头错位；数字排序需转换类型防字符串比较。
HTML 表格本身不支持排序，所有排序行为必须靠 JavaScript 实现；直接写 sort() 没效果，大概率是因为你对 NodeList 或 HTMLCollection 调用了它——它们不是数组，没有 sort() 方法。
为什么 sort() 一调就报错或没反应
浏览器里常见的错误是：TypeError: Cannot read property 'sort' of undefined 或静默失败。根本原因是 document.querySelectorAll('tr') 返回的是 NodeList，不是数组，不能直接调用 sort()。
- 必须先转成真数组：用
Array.from(tbody.querySelectorAll('tr'))或[...tbody.querySelectorAll('tr')] - 别用
table.rows直接排序——它包含thead和tfoot行，一排就把表头拖进数据队列了 - IE11 不支持
Array.from()？改用[].slice.call(tbody.querySelectorAll('tr'))
怎么只排 tbody 里的行，不碰表头
排序范围错了，功能就“看起来正常，用起来错乱”。用户点的是“年龄”列，结果表头被挪到中间去了——这就是没过滤掉 thead 的典型表现。
- 永远只操作
tbody.querySelectorAll('tr')，别用table.querySelectorAll('tr') - 如果表格有
tfoot，也得排除：tbody = table.querySelector('tbody')是最安全的定位方式 - 用
Array.from(tbody.rows)比tbody.querySelectorAll('tr')更稳，rows是 HTMLTableSectionElement 的自有属性，返回的是HTMLCollection，但语义更明确
数字列排成 “10 在 2 前面” 怎么修
这是字符串默认比较的结果："10" 为 <code>true，因为只比首字符。你看到的不是 bug，是 JS 默认行为。
- 简单场景用
parseFloat(cell.textContent) || 0，但遇到"-"、"N/A"会得NaN - 更稳的方式是
new Intl.Collator('en', { numeric: true }).compare(aVal, bVal)，它能正确处理"1"、"2"、"10" - 含单位（如
"25 kg"）？先清洗：cell.textContent.replace(/[^-\d.]/g, '') - 空单元格统一排末尾：
a === '' ? 1 : b === '' ? -1 : ...
升序/降序切换和状态管理最容易翻车的地方
多个表格共存时，用全局变量记 sortColumnIndex 和 sortDirection 必崩——A 表格点完，B 表格跟着切方向。
- 把状态存在 DOM 上：
th.dataset.sortDir = 'asc'，点击时 toggle 它 - 靠事件目标找最近的
table：event.target.closest('table')，再取它的id或dataset.tableId绑定作用域 - 视觉反馈别靠 CSS 伪元素画箭头（IE 不认），直接插文本：
▲/▼或用textContent控制 - 搜索过滤后点排序，该排全量还是仅当前可见行？这个判断逻辑一旦写错，用户就会觉得“排序失灵”
真正难的不是写对一行 sort()，而是让排序范围、数据提取、DOM 重排三者始终对齐——尤其是当表格里有 input、select、焦点或自定义事件时，用 innerHTML 重绘等于主动丢状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
