直接写 sort() 没反应是因为 NodeList 无该方法，需转为数组；排序须限定在 tbody 内 tr 元素，避免混入表头页脚；数字排序需转 Number 防字符串比较错误。
为什么直接写 sort() 没反应？
因为 document.querySelectorAll('tr') 返回的是 NodeList，不是数组，没有 sort() 方法。浏览器不会报错，但排序逻辑根本没执行——你看到的“没变化”，其实是静默失败。
必须先转成真数组：Array.from(tbody.querySelectorAll('tr')) 或 [...tbody.querySelectorAll('tr')]。IE11 不支持 Array.from？用 [].slice.call(tbody.querySelectorAll('tr')) 替代。
- 别用
table.rows：它包含thead和tfoot行，一排就把表头拖进数据里了 - 永远定位到
tbody：用table.querySelector('tbody')最稳，比靠选择器猜更可靠 - 如果表格没写
tbody标签，浏览器会自动补，但 DOM API 读取时行为不一致，务必显式写出
怎么只排数据行，不碰表头和页脚？
用户点“价格”列，结果表头被插到第3行——这是最常见的语义错误。根源是没隔离作用域。
正确做法是：只操作 tbody 下的 tr，且确保 th 全在 thead 里、tfoot（如有）独立存在。辅助技术（如屏幕阅读器）也依赖这个结构，不是“可有可无”。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
th必须带scope="col"，否则排序状态对读屏软件不可见 - 不要用
innerHTML = ...重写整个tbody：会清空所有input的勾选状态、丢失事件监听器 - 重排必须用
appendChild()原生移动节点：DOM 元素本身保留绑定和状态
数字列排成 “10 在 2 前面” 怎么修？
这不是 bug，是 JS 字符串默认比较："10" 为 <code>true，因为只比首字符。你得告诉 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 : 0 - 日期列？用
new Date(cell.textContent).getTime()转时间戳再比
多个表格共存时，排序状态为什么互相干扰？
用全局变量记 sortColumnIndex 和 sortDirection，A 表格点完，B 表格跟着切方向——状态没绑定到具体表格实例上。
把状态存在 DOM 上：th.dataset.sortDir = 'asc'，点击时 toggle 它；靠 event.target.closest('table') 找最近的表格，再取它的 id 或 dataset.tableId 绑定作用域。
- 视觉反馈别用 CSS 伪元素
::after插箭头：IE 不认，且读屏软件看不见 - 直接用
textContent控制▲/▼，或插入带aria-label的span - 排序后记得
focus()回当前th，保持键盘可访问性
th:nth-child(2) 设了 width: 25%，但父 table 没设 table-layout: fixed，那这个宽度就无效。 
