最简排序实现是为绑定onclick，用array.from()将行转数组后sort()，需避免直接对htmlcollection调用sort()；列索引用data-index更可靠；注意表单控件状态会丢失，须提前序列化并还原。
点击表头触发排序的最简实现
直接给 <th> 绑定 <code>onclick，用 Array.from() 提取 <tbody> 行，再用 <code>sort() 比较对应列文本内容——这是能跑通的最小闭环。不需要框架、不依赖外部库，原生 JS 就够。
常见错误是直接对 HTMLCollection（比如 document.querySelectorAll('tr')）调用 sort()，它没这个方法；必须先转成数组。
- 只对
<tbody> 内的 <code><tr> 排序，跳过 <code><thead> 和 <code><tfoot> <li>列索引从 0 开始，<code>th的data-index属性比靠cellIndex更可靠（避免合并单元格干扰） - 默认按字符串升序，数字会错排（如 "10" parseFloat() 或
parseInt()转类型
处理数字和空值的健壮性写法
纯文本排序在金额、日期、ID 等字段上会出错。关键不是“能不能排”，而是“排得对不对”。空单元格、-、N/A、NaN 都要显式归类，否则 sort() 可能返回 undefined 导致行消失。
示例：对第 2 列（索引 1）做数值排序，空值排最后：
function sortColumn(index, isAsc = true) {
const tbody = document.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
<p>rows.sort((a, b) => {
const aVal = a.cells[index].textContent.trim();
const bVal = b.cells[index].textContent.trim();</p><pre class="brush:php;toolbar:false;">let aNum = isNaN(aVal) ? -Infinity : parseFloat(aVal);
let bNum = isNaN(bVal) ? -Infinity : parseFloat(bVal);
if (aNum === -Infinity && bNum === -Infinity) return 0;
if (aNum === -Infinity) return 1;
if (bNum === -Infinity) return -1;
return isAsc ? aNum - bNum : bNum - aNum;});
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
rows.forEach(row => tbody.appendChild(row)); }
保持排序状态并切换升/降序
用户点两次同一列，应该降序 → 升序 → 降序，而不是每次都重置。靠全局变量或 data- 属性存状态都行，但推荐把状态记在 <th> 上，干净且可调试。<ul>
<li>首次点击设 <code>th.dataset.order = 'asc'，再次点击改为 'desc'
innerHTML 切换 ↑/↓，比 CSS 伪元素更直觉dataset.order，避免多列同时标为 activeIE 兼容和性能边界要注意什么
Array.from() 在 IE 中不支持，必须用 [].slice.call() 替代；textContent 在旧版 IE 是 innerText，但后者有兼容问题，稳妥起见统一用 innerHTML.replace(/]+>/g, '').trim() 提纯文本。
表格超 500 行时，appendChild 逐行重排会卡顿。这时应改用 DocumentFragment 批量插入：
const frag = document.createDocumentFragment(); rows.forEach(row => frag.appendChild(row)); tbody.appendChild(frag);
真正容易被忽略的是：排序后所有 <input>、<select></select> 的用户输入状态会丢失——因为 DOM 被移走再放回，绑定的事件和值都没了。如果表格含表单控件，必须提前序列化状态，重排后再还原。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
