点击表头排序时需先将NodeList转为数组再排序，否则sort()无效；仅对tbody内的tr操作，避免影响thead/tfoot；提取textContent前应trim()并处理数字类型，防止字符串比较错误。
点击表头触发排序时，sort() 返回 undefined 导致表格错乱
直接对 document.querySelectorAll('tr') 调用 sort() 不会生效——DOM NodeList 是只读类数组，sort() 只能作用于真实数组，且返回新数组而非原地修改。常见错误是写成：rows.sort(...); rows.forEach(...)，结果 rows 还是原始顺序。
- 必须先转成数组：
Array.from(rows)或[...rows] - 排序后不能直接
appendChild所有tr，否则会把thead也拖进tbody；应只操作tbody下的tr - 若表格含
colspan/rowspan行，需跳过thead和tfoot，仅对tbody > tr排序
textContent 提取单元格内容时被空格/换行干扰
用户常直接用 cell.textContent 比较，但实际值可能带前后空格、换行符或隐藏标签（如 ），导致字符串比较失准，数字排序变成字典序（如 "10"
- 清洗文本：
cell.textContent.trim().replace(/\s+/g, ' ') - 数字列要显式转类型：
parseFloat(text) || 0，避免NaN破坏排序 - 日期列建议统一解析为
Date.parse()时间戳，否则 "2023-1-1" 和 "2023-10-1" 字符串比会出错
多次点击同一列时，升序/降序切换逻辑写死在事件监听里
把排序方向硬编码在 onclick 里（比如每次点都按升序），就无法实现「点一次升序、再点降序」。状态必须可追踪，且不能依赖全局变量污染作用域。
- 用
data-sort-direction属性存当前方向，初始设为"asc" - 点击时先读属性，排序后翻转并更新：
th.setAttribute('data-sort-direction', dir === 'asc' ? 'desc' : 'asc') - 注意：不要用
class切换判断方向（易与其他样式冲突），属性更可靠
IE11 下 Array.from 报错，forEach 在 NodeList 上不可用
老项目仍需兼容 IE11 时，Array.from 和扩展运算符 [...rows] 均不支持，且 NodeList.forEach 是 ES2018 特性，IE 完全不认。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
var rows = [].slice.call(tbody.querySelectorAll('tr')) - 遍历用传统
for (var i = 0; i ，避开 <code>forEach - 箭头函数、
const/let需 Babel 编译，纯手写脚本建议用var+function
thead 是否参与、空单元格怎么处理、多语言字符排序是否用 localeCompare、性能上万行表格要不要虚拟滚动。这些细节不提前想清楚，上线后就是半夜被报警电话叫醒。 
