sort() 无效果的主因是直接对 HTMLCollection 或 NodeList 调用该方法，二者非数组，需先用 Array.from() 或 [...rows] 转为真数组；排序前须排除 <thead> <tfoot> 行，仅操作 <tbody><tr>，且重排必须用 appendChild() 等原生节点移动方式，避免丢失状态。

点击表头触发排序时，sort() 为什么没效果？

常见原因是直接对 HTMLCollection 或 NodeList 调用 sort() —— 它们不是数组，没有该方法。浏览器会静默失败或抛 TypeError: Cannot read property 'sort' of undefined。

• 必须先用 Array.from() 或展开语法 [...rows] 转成真数组
• 排序前记得排除表头行（<thead>）和脚注行（<tfoot>），只操作 <tbody><tr>
• 别用 innerHTML 拼接新 HTML 字符串再写回——会重置所有事件监听器和表单控件状态（比如已勾选的 <input type="checkbox">）

按数字列排序时，10 排在 2 前面？

这是字符串默认排序的典型表现："10" < "2" 为 true，因为比较首字符 "1" 和 "2"。必须显式转为数字或使用 Intl.Collator。

• 安全做法：用 parseFloat(cell.textContent) 提取数值，对 NaN 返回 0 或跳过
• 更健壮：用 new Intl.Collator('en', { numeric: true }).compare(a, b)，它能正确处理 "1", "2", "10"
• 注意空单元格或含单位的文本（如 "12px"），需先正则清洗：cell.textContent.replace(/[^-\d.]/g, '')

如何让排序支持升序/降序切换并记住状态？

不能靠全局变量存方向，多个表格共存时会冲突；也不建议每次点击都查 DOM 判断箭头图标——性能差且耦合 UI。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给每个 <th> 添加自定义属性，如 data-sort-dir="asc"，点击时 toggle 它
• 排序函数内读取该属性决定 a < b 还是 a > b，最后反转属性值
• 若需持久化（比如刷新后保持），可配合 localStorage 存键值对：tableId + '-sort-col' 和 tableId + '-sort-dir'

IE11 兼容性下 Array.from 报错怎么办？

Array.from 在 IE11 中不支持，但 Array.prototype.slice.call() 可以替代，不过对 NodeList 在某些旧版本仍有问题。

立即学习“前端免费学习笔记（深入）”；

• 最简兜底：用 var arr = []; for (var i = 0; i < list.length; i++) arr.push(list[i]);
• 如果项目已用 Babel，确保 .browserslistrc 包含 ie 11，它会自动 polyfill Array.from
• 避免用扩展运算符 [...list] —— IE11 完全不识别，会语法错误

实际排序逻辑的核心就三步：取数 → 比较 → 重排 DOM。最容易被忽略的是重排方式——必须用 appendChild() 或 insertBefore() 移动原生节点，而不是删了再建，否则表单数据、焦点、滚动位置全丢。