array.from()提取tbody行、按data-sort转换类型、appendchild()重插——三步完成排序，须跳过thead和tfoot，用data-sort属性确保值准确，升/降序状态用闭包变量控制，大数据量用documentfragment减少重排。
直接用 Array.from() 提取 tbody 行、按 data-sort 值转换类型、用 appendChild() 重插——三步就能跑通，不依赖库，但必须跳过 thead，否则表头会被拖进排序里。
只对 tbody 排序，别碰 thead 和 tfoot
浏览器不会阻止你对整个 table 调用 querySelectorAll('tr')，但那样会把表头也卷进去。实际操作中，thead 里的 tr 一旦被 sort() 重排，再 appendChild() 就会跑到 tbody 里，结构直接崩。
- 永远只操作
document.querySelector('#myTable tbody')下的tr - 用
Array.from(tbody.querySelectorAll('tr'))转真数组，别用[...tbody.rows]（IE 不认扩展运算符） - 如果表格有
tfoot，也要显式排除：加个:not(tfoot tr)或手动过滤tr.parentElement === tbody
data-sort 属性比 textContent 更可靠
直接读 td.textContent 容易出错：空格、换行、单位符号（如 “25岁”）、HTML 标签残留都会干扰比较。预存干净值才是稳的。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在 HTML 中给每列
td加data-sort="25"、data-sort="2024-03-15"、data-sort="apple" - 排序函数里统一用
cell.getAttribute('data-sort')取值，避免解析逻辑重复写 - 数字列别用
+cell.textContent隐式转换——遇到"25px"或空字符串就变NaN，改用Number(cell.getAttribute('data-sort'))
升/降序切换和视觉反馈要绑定在同一状态变量上
用户点两次同一列，应该反转顺序，而不是从头重排。靠 DOM 上临时加类或属性容易漏清、冲突，用一个闭包变量最轻量。
- 声明
let currentSort = { colIndex: -1, direction: 'asc' }存当前状态 - 点击时先判断
if (currentSort.colIndex === clickedIndex)，是就翻转direction，否则重置为asc - 箭头图标用
th.innerHTML = text + (direction === 'desc' ? ' ▼' : ' ▲')，别用额外 DOM 节点，减少维护成本 - 别在
th上反复setAttribute('aria-sort', ...)，屏幕阅读器其实只认初始值，动态更新意义不大
大数据量下 DocumentFragment 能明显减少重排
100 行以内直接 appendChild() 没压力；但超过 500 行，逐个插会触发多次 layout，卡顿肉眼可见。
- 创建
const frag = document.createDocumentFragment() - 排序后循环
frag.appendChild(tr)，最后一次性tbody.appendChild(frag) - 注意：
DocumentFragment不是 DOM 节点，不能用querySelector查它，只用来中转 - 如果已用
innerHTML = ''清空tbody，那就没法用 fragment —— 改用while (tbody.firstChild) tbody.removeChild(tbody.firstChild)才能保留引用
最容易被忽略的是：排序后焦点丢失、键盘导航（Tab 键）顺序没变、以及屏幕阅读器仍按原始 DOM 顺序读——这些不是 JS 排序本身的问题，而是语义结构没同步更新。真要兼顾可访问性，得配合 aria-rowindex 或重构为纯数据驱动渲染。但对大多数内部管理页，先跑通功能再补语义更现实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
