sort()没效果是因为HTMLCollection无原生sort方法，需转数组；数字/日期需类型识别并转换后比较；排序状态应存dataset并更新图标；分页或虚拟滚动时须排序原始数据而非DOM。
点击表头触发排序时，sort() 为什么没效果？
常见原因是直接对 HTMLCollection（比如 document.querySelectorAll('tr')）调用 sort() —— 它不是数组，没有原生 sort() 方法。必须先转成数组。
- 用
[...document.querySelectorAll('tbody tr')]或Array.from(document.querySelectorAll('tbody tr')) - 排序前务必排除
thead行或空行，否则td[0].textContent可能是空字符串或表头文字，导致NaN或意外顺序 - 若单元格含 HTML 标签（如
<span>123</span>），用td.textContent.trim()而非td.innerHTML，避免标签干扰
数字列和日期列排序总乱序，怎么识别类型并正确比较？
JavaScript 默认按字符串排序：'10' < '2' 为 true。必须显式判断类型再转换。
- 简单数字判断：用
!isNaN(Number(cellText)) && cellText.trim() !== ''，然后用Number(cellText)比较 - 日期识别建议用正则粗筛：
/^\d{4}-\d{2}-\d{2}$/.test(cellText)，再用new Date(cellText).getTime()转时间戳比较 - 避免在比较函数里反复调用
parseInt()或new Date()，提前提取并缓存值，否则每轮比较都重复解析，性能明显下降
如何让排序状态可视化（升/降图标）并支持切换？
单纯改 DOM 内容容易丢失状态，推荐用元素 dataset 记录当前排序方向。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 点击表头时检查
th.dataset.sortDirection：若为'asc'，设为'desc'并反转比较逻辑；若无或为'desc'，设为'asc' - 图标更新用
th.innerHTML = cellText + (direction === 'asc' ? ' ▲' : ' ▼')，注意不要覆盖原始文本结构（如有<span>包裹） - 同一时间只允许一列排序，排序前清空其他
th的dataset.sortDirection和图标，否则视觉与行为不一致
表格含分页或虚拟滚动时，sort() 为什么只排了当前页？
这是最常被忽略的点：DOM 排序只影响渲染层，不触底层数据源。如果数据来自分页接口或前端分页计算，排序必须作用于原始数组，再重新渲染整页。
立即学习“前端免费学习笔记（深入）”；
- 不要操作
tbody的tr元素顺序，而是维护一个dataList数组，排序后调用重绘函数（如renderTable(dataList.slice(...))） - 如果用了
innerHTML拼接表格，排序后需完整重写tbody.innerHTML，不能只移动tr——否则事件监听器丢失、input 值清空、focus 状态中断 - 服务端分页场景下，排序应作为参数发请求（如
?sort=price&order=desc），前端只做 loading 和状态同步，别试图本地排序后端数据
真正麻烦的不是写排序函数，而是搞清数据在哪一层、谁负责维护顺序、以及 DOM 更新是否破坏了已有交互状态。
