点击表头排序需先获取数据行并转数组，清空tbody后按列值（数字用parseFloat、文字用toLowerCase和localeCompare）排序，再批量插入；须处理空值、特殊字符、移动端300ms延迟及排序状态反馈。
点击表头触发排序的 JavaScript 实现
直接给
绑定点击事件，用
抓取所有
行（跳过第一行表头），再调用
比较对应列的文本或数字内容。关键不是“怎么排”，而是“怎么取值”和“怎么稳定重绘”。
常见错误是直接对
调用
—— 它不可排序；或者没清空 tbody 就 append，导致重复插入。
先用
获取数据行，转成数组
排序前用
清空，避免残留
比较时用
或
处理数字列，否则 "10" 会排在 "2" 前面
文字列建议统一用
避免大小写干扰
thArray.from()trsort()HTMLCollectionsort()document.querySelectorAll('tbody tr')tbody.innerHTML = ''parseFloat()parseInt().toLowerCase()
处理空单元格和特殊字符的健壮性补丁
原始实现遇到空单元格（
-
、或带单位的数字（如
"25 kg"
）就会崩——
parseFloat("25 kg")
是 25，但
parseFloat("-") === NaN
，直接导致排序失效。
必须预处理值，不能依赖原生 textContent。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
用正则提取纯数字：
const num = cell.textContent.match(/-?\d+\.?\d*/)?.[0] || '0'
空值统一设为
''
或
Infinity
（若想排最后）
对中文列，
localeCompare()
加
{ sensitivity: 'base' }
忽略标点差异
为什么不用第三方库（比如 DataTables）？
如果只要单页静态表格、不到 1000 行、不需分页/搜索/导出，引入 DataTables 就是杀鸡用炮——它默认加载 1.5MB JS + CSS，而手写排序逻辑加起来不到 20 行。
真正卡住的从来不是功能，是 DOM 重排开销。1000 行以上，
innerHTML = ''
+ 逐个
appendChild
会明显卡顿，这时得用
DocumentFragment
批量插入。
替换
tbody.innerHTML = ''
和循环 append，改用
fragment = document.createDocumentFragment()
排序后
rows.forEach(row => fragment.appendChild(row))
，再
tbody.appendChild(fragment)
这个优化在 Chrome/Firefox 下对 2000+ 行能减少 60% 渲染耗时
移动端点击响应延迟与 touch 事件冲突
在 iOS Safari 上，单纯绑
click
有约 300ms 延迟，且跟
touchstart
冲突可能导致点两次才触发。别等浏览器兼容，自己提前接管。
给
th
加
style="cursor: pointer"
明确可交互
监听
touchend
替代
click
，并立即
e.preventDefault()
为兼顾桌面端，可同时绑定两个事件，用
if ('ontouchstart' in window)
分支判断
最易被忽略的是：排序状态没视觉反馈。用户点了两次同一列，不知道当前是升序还是降序——得加个上/下箭头图标，且记录上次排序列和方向，下次反向排。这个状态管理，比排序逻辑本身还容易漏掉。