HTML排序本质是JavaScript操作DOM节点顺序；默认sort()按字符串字典序比较导致"10"排在"2"前，需显式转数字；带单位、空值需清洗和fallback；推荐直接操作tr引用而非预存数组；表头用data属性维护升降序状态；含表单元素时需cloneNode避免丢失状态。
HTML 本身不排序，也不整理数据；所谓“HTML 排序”，本质是用 JavaScript 操作 DOM 节点顺序，而是否需要额外“数据整理”，取决于你排序的列里有没有混杂格式、空值、单位或非纯数字内容。
为什么直接 sort() 会把 "10" 排在 "2" 前面
这是最常踩的坑：JavaScript 的 Array.prototype.sort() 默认按字符串字典序比较。哪怕 <td>10</td> 和 <td>2</td> 看起来是数字，parseInt() 没显式调用前，它们就是字符串 "10" 和 "2" —— 字符串比较时 "10" < "2" 为 true，结果就是错的。
- 必须提取文本后手动转成数字：
parseFloat(td.textContent)或Number(td.textContent.trim()) - 遇到
<td>23 kg</td>这类带单位的，得先用正则清理：td.textContent.replace(/[^-\d.]/g, '') - 空单元格或
"--"、"N/A"会导致NaN，需统一 fallback，比如|| 0或|| -Infinity（升序时排最后）
要不要先把所有行数据“提取成数组”再排序
可以，但没必要硬套这个流程。常见做法是直接操作 <tr> 元素引用，避免中间数组拷贝开销：
- 用
Array.from(tbody.querySelectorAll("tr"))获取行数组，比遍历tbody.children更可靠（跳过注释、文本节点） - 排序时用
rowA.cells[colIndex].textContent提取值，不提前存数组，逻辑更直白 - 如果后续还要做分页、搜索或导出，那确实值得把原始数据结构化成对象数组（例如
{name: "张三", number: 23}），但单纯排序不是必须
表头点击切换升/降序时，状态怎么维护
不能只靠 sort() 返回值判断方向——它不记录历史。推荐在表头元素上用属性标记当前状态：
立即学习“前端免费学习笔记（深入）”；
- 初始：
<th data-sort-col="1" data-sort-dir="asc">号码</th> - 点击后翻转：
th.dataset.sortDir = th.dataset.sortDir === "asc" ? "desc" : "asc" - 排序函数里根据
dir决定返回a - b还是b - a，别用return a > b ? -1 : 1这种写法（对NaN不安全） - 记得清掉其他列的
data-sort-dir，避免视觉误导
真正容易被忽略的是：表格里有 <input>、<select> 或自定义组件时，直接 appendChild() 移动 <tr> 会丢失用户已填的值或事件绑定。这时候必须用 cloneNode(true) + remove()，或者改用虚拟数据驱动（如 React/Vue），原生 DOM 排序只适合静态展示型表格。
