HTML表格排序需用JavaScript监听表头点击，提取tbody中tr节点数组，按目标列数据类型（数字用Number()、日期用new Date()、中文用localeCompare()）排序后批量重插DOM；须避开跨行单元格、处理空值，并用DocumentFragment优化性能。
点击表头触发排序的最小可行实现
原生 HTML 表格本身不支持点击排序，必须用 JavaScript 拦截 th 点击事件、提取 tbody 中的 tr、按目标列重新排序后重插 DOM。核心是：不改 HTML 结构，只操作 tr 节点顺序。
常见错误是直接对 innerHTML 字符串排序——会丢失事件监听器、表单值、动态状态；正确做法是用 Array.from(tbody.querySelectorAll('tr')) 获取真实节点引用，sort() 后用 appendChild() 逐个重挂（DOM 重挂自动移除原位置）。
- 确保每列
th有唯一可识别的索引，推荐用data-index属性，比如<th data-index="0">姓名</th> - 首次点击升序，再次点击降序，用布尔变量记录当前方向，别用字符串比较（易出错）
- 数值列要转
Number再比，否则"10" < "2"成立；日期、金额等需额外解析逻辑
处理空值、合并单元格和特殊字符
真实表格常含 rowspan/colspan 或空单元格，直接取 tr.cells[index].textContent 会出错：cells 是视觉单元格数组，但跨行单元格在后续行中对应位置为 undefined。稳妥方式是遍历 tr.cells 找第 N 个非 colspan 跨列且未被上一行 rowspan 占用的单元格——实际项目中建议避开跨行排序，或提前标准化数据。
空值（null、''、undefined）默认排最前，若要排最后，排序函数里显式判断：if (a === '' || a == null) return 1;（升序时）。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 中文排序要用
localeCompare()，否则按 Unicode 码点排（“王”可能排在“李”前） -
<input>、<select>的当前值不会随tr移动丢失，但onchange监听器若绑定在tr上，重挂后需重新绑定 - 避免对含
contenteditable的单元格排序，编辑状态易中断
性能瓶颈在哪？大数据量怎么扛
超过 500 行时，每次点击都全量 sort() + 逐个 appendChild 会卡顿。瓶颈不在 JS 排序，而在 DOM 重绘：浏览器要为每个 appendChild 计算样式、布局、重绘。
- 用
DocumentFragment批量插入：先frag.appendChild(tr)循环，再一次性tbody.appendChild(frag) - 超过 2000 行，考虑虚拟滚动（只渲染可视区
tr），排序逻辑移到数据层，DOM 只响应数据变更 - 避免在排序函数里反复调用
getBoundingClientRect()或触发强制同步布局
为什么用 Array.from() 而不是 [...] 或 Array.prototype.slice.call()
Array.from(tbody.querySelectorAll('tr')) 最安全：它能正确处理类数组对象（NodeList），且兼容 IE11+；[...] 在某些旧版 Safari 中对 NodeList 展开失败；slice.call 在 NodeList 无 length 属性时（如动态查询）会返回空数组。
更关键的是，Array.from() 支持第二个参数作映射函数，可一步提取并清洗数据：Array.from(rows, row => row.cells[i].textContent.trim())，减少后续循环开销。
排序稳定性和 DOM 节点复用是隐形重点——同一份数据多次排序，相同值的 tr 相对位置不应改变，否则用户会感觉行在“乱跳”。原生 Array.prototype.sort() 在 V8 中已稳定，但若手写比较函数漏掉 return 0，就会破坏稳定性。
