点击表头排序应直接监听th的click事件，提取tbody中tr节点数组并按指定列文本内容排序后重新append，避免innerHTML重建以保留事件绑定和输入状态，同时需处理aria-sort属性更新与空单元格逻辑。
点击表头触发排序的 DOM 逻辑怎么写
直接监听 th 元素的 click 事件，拿到当前列索引，再对 tbody 下的所有 tr 进行重新排序。关键不是“重绘”，而是提取 tr 节点、排序后按新顺序重新 append 回去——DOM 节点本身可移动，无需 innerHTML 拼接。
常见错误是用 innerHTML 重建表格，导致绑定在 tr 上的事件丢失、输入框状态清空、焦点丢失；或者只排序文本却忽略 data-* 属性或子元素结构。
- 用
Array.from(tbody.querySelectorAll('tr'))获取真实节点数组（不是 HTMLCollection） - 排序函数里用
tr.cells[index].textContent.trim()取值，避免空格干扰 - 升序/降序状态建议存在
th.dataset.sortOrder中，而不是全局变量 - 排序后调用
tbody.append(...sortedTrs)，利用 DOM 移动特性保持节点引用不变
数字和日期列排序为什么总是错位
默认按字符串排序：'10' 为 true，导致 10 排在 2 前面。日期字符串如 <code>'2023-05-01' 虽然能字符串比对，但 '2023/5/1' 或中文格式就会失效。
- 对数字列：先尝试
parseFloat(cell.textContent)，isNaN则 fallback 到 0 或Infinity - 对日期列：优先识别 ISO 格式（
cell.textContent.match(/^\d{4}-\d{2}-\d{2}/)），否则用Date.parse()，失败时返回NaN并统一置为最小值 - 不要用
new Date(str).getTime()直接转换——无效字符串会得NaN，参与比较会污染整个排序结果
如何让排序支持多列（Shift + 点击追加排序条件）
单列排序容易，多列需要维护一个排序队列，每次 Shift + click 在末尾追加，Ctrl + click 删除某列，点击已存在列则切换升降序。核心是把每列的排序逻辑封装成可组合的 compare 函数。
立即学习“前端免费学习笔记（深入）”；
- 用
event.shiftKey判断是否追加，而非仅靠 click 次数 - 存储结构建议为数组，如
[{index: 1, dir: 'asc'}, {index: 2, dir: 'desc'}] - 最终
Array.sort()的 compare 函数要循环该数组，遇到差异就 return，直到最后一列才返回 0 - 注意：多列排序下，首次点击某列应设为 asc，再次点同列才切 desc；追加的新列默认为 asc
IE11 或旧版 Safari 下 append() 不兼容怎么办
tbody.append(...trs) 在 IE11 完全不支持，Safari appendChild 循环或使用 DocumentFragment 批量插入。
- 兼容写法：
const frag = document.createDocumentFragment(); sortedTrs.forEach(tr => frag.appendChild(tr)); tbody.appendChild(frag); - 避免在循环中反复
appendChild到真实 DOM，性能差且可能触发多次重排 - IE11 下
Array.from()也不支持，改用Array.prototype.slice.call(tbody.querySelectorAll('tr'))
实际做下来最易被忽略的是：排序后没有重置其他列的 aria-sort 属性，导致屏幕阅读器无法感知当前排序状态；还有未处理空单元格（cell.textContent 为空时如何参与比较）——这些细节不补，功能看似跑通，但可访问性和鲁棒性立刻掉档。
