排序HTML<tr>内<td>单元格后tr.cells缩短的问题排查

问题根源 #

你代码里的replaceChild操作会引发动态DOM结构变化，导致单元格丢失：
当用<tr>已有的单元格（比如排序后的某个单元格）替换当前循环到的单元格时，这个目标单元格会先被从原位置移除，再插入到新位置，同时被替换的原单元格会被直接移除出<tr>。循环过程中<tr>的子节点数量会动态减少，最终出现单元格缺失的情况。

修复代码 #

正确的做法是先取出所有单元格，排序后清空<tr>再重新添加，避免动态DOM操作的干扰：

// 取出所有单元格并排序
const sortedCells = Array.from(tr.cells).sort((a, b) => b.textContent - a.textContent);
// 清空<tr>下所有子节点
while (tr.firstChild) {
  tr.removeChild(tr.firstChild);
}
// 将排序后的单元格重新添加到<tr>中
sortedCells.forEach(cell => tr.appendChild(cell));

额外说明 #

• 如果你的单元格内容是字符串而非纯数字，需要调整排序比较函数，比如用localeCompare处理字符串排序
• 这种方法不会改变单元格本身的属性和事件绑定，只是调整它们在DOM中的位置

内容的提问来源于stack exchange，提问作者JBoy