最小可行排序实现需提取数据→排序→重建tr节点，避免直接移动DOM；通过data-index和data-type声明列序号与类型，用data-sort控制方向并同步CSS类；注意IE兼容性降级处理。
点击表头触发排序的最小可行实现
直接用原生 JavaScript 绑定 click 事件到 <th> 元素上，配合 Array.prototype.sort() 重排 <tbody> 中的 <tr> 节点即可，不需要框架或第三方库。
关键不是“怎么写排序逻辑”，而是“怎么让 DOM 更新正确且不丢失状态”——比如复选框勾选、输入框内容、内联样式等。最稳妥的做法是：提取数据 → 排序 → 重建 <tr>，而不是直接移动已有节点。
- 给每个
<th>加data-index属性，标明对应列序号（从 0 开始） - 监听
click时读取该属性，从每行<td>或<th>中按索引取文本（row.cells[index].textContent） - 用
Array.from(table.tBodies[0].rows)获取所有行节点，避免HTMLCollection动态更新干扰 - 排序后用
fragment.appendChild(row)批量插入，比逐个appendChild性能更好
处理数字、日期和空值的排序逻辑
默认按字符串排序会出错：比如 "10" 排在 "2" 前面。必须根据列类型做类型判断，不能只靠表头文字（如“年龄”未必全是数字）。
推荐做法是在 <th> 上加 data-type="number" 或 data-type="date"，显式声明类型。空值（""、"—"、"N/A"）统一转为 null 或 undefined，再约定排在前面还是后面。
立即学习“前端免费学习笔记（深入）”；
-
data-type="number"：用parseFloat()转换，isNaN()则返回NaN，排序时用Number.isNaN(a) ? -1 : Number.isNaN(b) ? 1 : a - b -
data-type="date"：用new Date(cell.textContent).getTime()，无效日期返回NaN，同样需单独处理 - 中文文本慎用
localeCompare()：默认排序可能不符合预期，建议加{ sensitivity: 'base' }忽略大小写和变音符号
维持当前排序方向与视觉反馈
用户需要知道“现在是升序还是降序”，且第二次点击应切换方向。不要依赖全局变量存状态，把方向存在 <th> 的 data-sort 属性里（值为 "asc" 或 "desc"）。
- 首次点击设
data-sort="asc"，再次点击改为"desc"，并反转比较函数的返回值（乘以-1） - 用 CSS 类（如
.sort-asc/.sort-desc）控制箭头图标，避免内联样式污染 - 清除其他表头的
data-sort和 class，保证同一时间只有一个列生效——否则多列排序逻辑会失控 - 注意：
data-sort改变后要同步更新 class，否则视觉和状态不一致
IE11 及以下兼容性注意事项
Array.from()、Element.prototype.closest()、String.prototype.trim() 在 IE 中不可用，必须降级或补丁。
- 替换
Array.from(rows)为Array.prototype.slice.call(rows) - 获取点击的
<th>时，不用e.target.closest('th')，改用循环向上找parentNode直到匹配tagName === 'TH' -
textContent在 IE8–IE9 中不支持，改用innerText（但注意它会受 CSS 隐藏影响），或兜底用nodeValue+childNodes遍历 - 避免使用箭头函数、模板字符串，全部改用
function和字符串拼接
真正的难点不在排序算法本身，而在如何干净地提取、转换、渲染数据——尤其是当单元格里混着链接、按钮、甚至嵌套表格时，textContent 会漏掉关键信息，这时候就得解析 HTML 片段或预留 data-sort-value 属性。
