数据未变化是因为事件监听未绑定到真实th元素或排序后未重新渲染表格；需用querySelectorAll确认th、更新tbody内容并深拷贝数组。
点击表头触发排序时，为什么数据没变化？
多数情况是事件监听没绑到真实 <th> 元素，或者排序逻辑没重新渲染表格。浏览器不会自动重排 DOM，必须手动更新 tbody 内容或用框架响应式机制触发重绘。
实操建议：
- 用
document.querySelectorAll('th')确认选中的是实际可点击的表头单元格，不是<thead>或包裹容器 - 确保每次排序后调用
tbody.innerHTML = newRowsHTML或使用replaceChildren()替换子节点（现代写法） - 避免在事件回调里直接修改原始数组却不深拷贝——排序会改变原数组顺序，影响后续点击
sort() 对数字列排序结果错乱？
JavaScript 的 sort() 默认按字符串比较，10 会排在 2 前面。数值列必须显式转类型再比较。
示例修正写法：
立即学习“前端免费学习笔记（深入）”；
rows.sort((a, b) => {
const valA = parseFloat(a.cells[index].textContent) || 0;
const valB = parseFloat(b.cells[index].textContent) || 0;
return order === 'asc' ? valA - valB : valB - valA;
});注意点：
-
parseFloat()比Number()更容错，能处理"$123"或"12.5%"类文本 - 加
|| 0防止NaN导致整个排序失效 - 日期列要用
new Date().getTime()转时间戳比较，不能直接比字符串
如何记住上次点击的列和方向？
用户连续点两次同一列，应该切换升序/降序，而不是重复升序。需要状态变量记录当前排序字段和方向。
推荐做法：
- 用一个对象缓存：
let sortState = { column: null, order: 'asc' }; - 每次点击先检查
if (sortState.column === clickedIndex)，是则翻转order，否则重置为'asc' - 给当前排序列的
<th>加 class（如sorted-asc），方便 CSS 显示箭头图标 - 别用
data-属性存状态——DOM 属性易被其他脚本覆盖，且读写慢于 JS 变量
移动端点击响应延迟或误触怎么办？
iOS Safari 和部分安卓浏览器对 click 事件有 300ms 延迟，且 <th> 默认不支持 :active 效果，用户感知不到反馈。
解决路径：
- 用
touchstart替代click，并立即加临时 class 表示激活态 - 给
<th>加cursor: pointer和-webkit-tap-highlight-color: transparent - 避免在
th里放button或a标签——会干扰事件冒泡和默认行为 - 真机测试时注意：某些 WebView 不支持
event.target.closest('th')，得退化成遍历父元素判断
表格排序看着简单，但真实项目里最常卡在 DOM 更新时机、数值类型误判、移动端事件兼容这三块。尤其要注意，innerHTML 替换 tbody 会销毁所有绑定在 tr 上的事件监听器——如果行内有编辑按钮或 checkbox，得重绑或改用事件委托。
