html无内置排序功能，所有排序均需javascript实现；原生属性如sort无效，css order仅改变渲染顺序；array.sort()配合localecompare、date解析可处理中文、时间及多级排序，但需注意边界情况。
HTML 本身没有内置的排序能力，table 或 ul 里的数据不会因为加了某个属性就自动按数字或字母重排——这是常见误解的根源。
为什么 <table> 加 <code>sort 属性没反应
HTML 标准里根本不存在 sort、data-sort 这类原生可执行排序的属性。浏览器看到不认识的属性直接忽略，不会报错也不会生效。
- 你可能在某些 CMS 或编辑器里看到“点击表头排序”，那背后是 JavaScript 实现的，不是 HTML 本身的功能
-
th标签支持scope和abbr，但不支持sortable（除非你自己用 JS 绑定） - 试图用 CSS
order控制flex子项顺序？它只影响渲染层，DOM 顺序不变，也不算真正“数据排序”
用 Array.sort() + innerHTML 手动重排表格最可控
适合静态页面、数据量不大（
- 先用
document.querySelectorAll('tbody tr')拿到所有行节点，转成数组（用Array.from()或展开运算符） - 提取排序依据：比如第 2 列文本 →
row.cells[1].textContent.trim() - 数字列记得用
parseFloat()或parseInt()转类型，否则'10' 会成立 - 排序后用
fragment批量插入，避免反复触发重排（比逐个appendChild快）
const rows = Array.from(document.querySelectorAll('tbody tr'));
rows.sort((a, b) => {
const aVal = parseFloat(a.cells[2].textContent) || 0;
const bVal = parseFloat(b.cells[2].textContent) || 0;
return aVal - bVal;
});
const fragment = document.createDocumentFragment();
rows.forEach(row => fragment.appendChild(row));
document.querySelector('tbody').appendChild(fragment);
遇到中文、时间、多级排序怎么办
原生 Array.sort() 的字符串比较对中文默认按 Unicode 码点，结果常不符合预期；日期字符串如 '2023-05-01' 可以直接比，但 '01/05/2023' 就不行。
- 中文排序加
localeCompare('zh-CN', { sensitivity: 'base' })，比a > b可靠得多 - 时间字段优先转成
new Date()再比，避免格式差异导致错误（'2023/5/1'和'2023-05-01'都能解析） - 多级排序用「链式判断」：先比 A，A 相等再比 B，例如
return aA - bA || aB.localeCompare(bB) - 注意
Date.parse()对非法字符串返回NaN，要兜底，否则整个排序会乱序
真实项目里，如果排序操作频繁或数据来自 API，别硬套 DOM 操作——该用 Array.sort() 在数据层处理，再统一渲染；或者引入 ag-Grid、Tabulator 这类专为表格设计的库，它们对空值、类型推断、国际化都做了深度适配。手写排序容易漏掉边界情况，比如 undefined 单元格、带单位的数字（'12.5kg'）、合并单元格（rowSpan）干扰索引——这些才是实际卡住进度的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
