直接在 DOM 中原地替换 元素会导致索引错乱，因为每个节点在文档中只能存在一次；正确做法是先清空 ，再按排序后顺序重新追加所有 。
直接在 dom 中原地替换 `
在操作表格行（<tr>）内部单元格（<code><td> 或 <code><th>）时，若试图通过 <code>replaceChild() 原地交换节点顺序，极易引发不可预期的行为——根本原因在于：DOM 节点具有唯一性，同一节点不能同时存在于多个位置，且一旦被移动，其原始父节点中的引用即刻失效。
例如，假设你有 5 个 <td>，索引为 0–4，排序后希望将原索引 3 的单元格移到位置 0。当你执行 <code>tr.replaceChild(sortedCells[0], tr.cells[0]) 时，sortedCells[0]（即原第 3 个单元格）被移入位置 0，它立即从原位置（索引 3）脱离。此时 tr.cells 长度动态变为 4，后续索引全部前移（原索引 4 变为 3），导致循环中 i = 1 时访问 tr.cells[1] 实际指向的是原索引 2 的单元格，而原索引 3 的单元格已“消失”于当前 tr.cells 类数组中——这就是 tr.cells.length 在循环中不断缩短、最终漏掉或重复操作节点的根本原因。
✅ 正确且简洁的解决方案是：先提取并排序节点数组，再清空 ⚠️ 注意事项： 总结：DOM 节点不可复用、不可“多处存在”。排序表格单元格的本质不是交换位置，而是重排节点归属关系——清空 + 重建是最清晰、最健壮的实现范式。<tr>，最后统一追加。由于 <code>appendChild() 会自动将节点从原位置移除并插入新位置，整个过程天然避免冲突：// 获取所有单元格，转换为数组并按文本内容降序排序（数值比较）
const sortedCells = Array.from(tr.cells).sort((a, b) => {
const aVal = parseFloat(a.textContent) || 0;
const bVal = parseFloat(b.textContent) || 0;
return bVal - aVal; // 降序；改为 aVal - bVal 则为升序
});
// 清空当前行（注意：innerHTML = "" 安全移除所有子节点）
tr.innerHTML = "";
// 按排序后顺序逐个追加（自动处理节点迁移）
for (const cell of sortedCells) {
tr.appendChild(cell);
}
appendChild() 不会丢失绑定的 JS 事件（现代浏览器中事件监听器随节点移动），但需确保监听器是通过 addEventListener 添加的（而非内联 onclick）；parseFloat() 并提供默认值（如 || 0），防止 NaN 导致排序异常；a.textContent.localeCompare(b.textContent)（降序则传入 { sensitivity: 'base' } 并交换参数）；tr.children 替代 tr.cells，因 cells 是专用于表格行的标准只读集合，兼容性更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
