点击表头排序需绑定click事件到thead并委托，用event.currentTarget和data-sort属性精准识别可排序列；多类型数据比较需统一提取文本、转数字或日期、妥善处理空值；维持排序状态并更新UI指示符；重排tbody时用DocumentFragment保留事件监听和input值。
点击表头触发排序的 DOM 事件绑定方式
核心是给 <th> 绑定 click 事件，但必须排除非排序列（比如操作列、图片列），否则会误触发。常见错误是直接给所有 <th> 加监听，结果点到带按钮或图标的位置时，event.target 是子元素而非 <th> 本身。
- 用
event.currentTarget确保拿到的是被绑定的<th>元素，不是内部<span>或<img> - 推荐在
<thead>上委托监听，避免重复绑定：监听thead，再用event.target.matches('th[data-sort]')过滤可排序列 -
data-sort属性标记字段名（如<th data-sort="name">姓名</th>），比靠索引定位更健壮，支持动态列顺序变化
原生 JS 实现多类型数据的比较逻辑
表格里可能混着数字、日期、字符串，直接用 a > b 会出错——比如 "10" > "2" 返回 false。不能只靠 String.prototype.localeCompare()，它对数字不友好，对空值也不处理。
- 先统一提取单元格文本：
cell.textContent.trim()，避免空格干扰 - 用
Number(cellText)尝试转数字；若isNaN()且非空，则按字符串比较；若为空字符串或null，统一归为最小值（-Infinity）或最大值（Infinity），取决于你希望空值排前面还是后面 - 日期字段建议加
data-type="date"属性，解析时用new Date(cellText).getTime()，避免格式歧义
维持升序/降序状态并更新 UI 指示符
用户需要知道当前按哪列、什么方向排序，否则反复点击没反馈。纯靠 class 切换（如 sort-asc/sort-desc）最轻量，但容易漏清上一次的状态。
- 维护一个变量
currentSort = { key: '', order: 'asc' }，每次点击先清除所有th的排序 class，再给当前列加上对应 class - 切换逻辑：如果点击的是同一列，就翻转
order（asc → desc）；否则重置为asc - 箭头符号用 Unicode 字符即可：
↑和↓，写在th内部，避免额外 DOM 节点；用textContent动态替换，别用 innerHTML 防 XSS
重新渲染 tbody 时保留原始数据引用关系
直接操作 tbody.innerHTML 最快，但会销毁所有事件监听和 input 输入值；用 DocumentFragment 插入更安全，但新手常忽略 fragment 的节点所有权问题。
立即学习“前端免费学习笔记（深入）”；
- 不要用
Array.from(trs).sort(...)后再appendChild—— 这会把原<tr>移动过去，导致已绑定的事件丢失（比如行内编辑按钮） - 正确做法：先用
Array.from(tbody.children)提取原始<tr>节点，排序时只交换它们在数组中的位置，最后用fragment.append(...sortedTrs)一次性替换 - 如果某行有
<input>，它的 value 不会因 DOM 移动而丢失，但 focus 状态会丢，需手动保存/恢复
真正麻烦的不是排序逻辑本身，而是处理空值、混合类型和 DOM 状态同步——这些细节不提前想清楚，上线后才会暴露。
