表格排序需先识别td内容类型再转换：数字用parsefloat，日期转时间戳，空值转0或nan并置后；多列排序用对象缓存各列方向；dom操作优先用documentfragment或事件委托避免监听器丢失；ie11需用array.prototype.slice.call转真数组。
点击表头触发排序时，td 内容被误判为字符串导致数字排序错乱
默认用 innerHTML 或 textContent 读取 td 值，所有内容都变成字符串，"10" 会排在 "2" 前面。必须先识别数据类型再转换。
- 检查
td内容是否纯数字（可含负号、小数点），用/^-?\d*\.?\d+$/.test(text)判断 - 是数字则用
parseFloat(text)转换，避免parseInt截断小数 - 空值或非法值统一转为
0或NaN，并在排序时把NaN排最后（用isNaN(a) ? 1 : isNaN(b) ? -1 : a - b） - 日期字符串建议用
new Date(text).getTime()转时间戳，否则按字典序排会出错（如"2023-1-1">"2023-10-1"）
多列排序时，如何避免每次点击都重置前一列的排序方向？
单列排序只需翻转布尔值，但多列需记录每列独立状态。不能全局共用一个 sortDirection 变量。
- 用对象缓存各列状态：
const sortStates = { "name": "asc", "age": "desc", "date": "asc" } - 点击某列时只更新该 key，其他列保持原值
- 排序函数里按列顺序依次比对：若当前列值相等，才继续比下一级列（用
Array.prototype.sort的链式比较逻辑） - 注意：DOM 中列顺序和数据字段名不一致时（比如第 2 列对应
data-field="score"），要靠th.dataset.field获取真实字段名，别硬编码索引
tbody 重排后，原 tr 元素绑定的事件监听器丢失
直接用 appendChild 移动 tr 会保留其事件监听器，但用 innerHTML 或 outerHTML 替换整个 tbody 就会清空所有绑定。
- 优先用
documentFragment收集排序后的tr，再一次性appendChild到tbody - 如果用了事件委托（如
tbody.addEventListener("click", handler)），则不受影响，推荐这种方式 - 若必须给每个
tr绑独立事件，改用tr.cloneNode(true)+remove()+append()，但注意cloneNode不复制通过addEventListener绑定的监听器，得手动重绑
IE11 下 Array.from(tbody.rows) 返回伪数组，sort() 无效
IE11 的 HTMLCollection 不支持直接调用 sort，必须先转成真数组。
- 安全写法：
Array.prototype.slice.call(tbody.rows)或[...tbody.rows]（后者 IE11 不支持，慎用） - 避免用
Array.from—— IE11 原生不支持，即使加了 polyfill 也可能因原型污染失效 - 排序前打印
rows.constructor.name验证是否为Array，不是就强制转换 - 移动端 Safari 对
documentFragment的 append 行为有兼容差异，建议统一用fragment.appendChild(tr)而非fragment.append(tr)
表格排序真正麻烦的不是交换顺序，而是怎么让「内容解析」和「DOM 状态维护」不出岔子。尤其当 td 里混着图标、链接、空格甚至 HTML 标签时，textContent 和 innerText 的行为差异会立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
