如何实现表格中余额的升序与降序排序？

原代码存在的核心问题 #

• 排序逻辑不完整：for循环中只要对比一对元素就直接break，无法完成冒泡排序的完整遍历，导致只能交换一次元素就停止
• 升序/降序逻辑混乱：试图在同一个循环里同时处理两种排序方向，错误的else if (!shouldSwitch)分支会打乱已排序内容
• 动态DOM集合干扰：table.rows是动态集合，插入元素后集合长度会实时变化，导致循环遍历出错
• 无状态记录：没有记录当前排序方向，无法实现点击切换升序/降序的功能

修正后的代码 #

// 全局变量记录当前排序方向，初始为升序
let sortAscending = true;

function sortTableByBalance() {
  const table = document.getElementById("myTable");
  const tbody = table.tBodies[0];
  // 将行转为静态数组，避免动态DOM集合的问题
  const rows = Array.from(tbody.rows);

  // 冒泡排序实现
  for (let i = 0; i < rows.length - 1; i++) {
    let swapped = false;
    for (let j = 0; j < rows.length - 1 - i; j++) {
      const currentBalance = Number(rows[j].getElementsByTagName("TD")[2].textContent);
      const nextBalance = Number(rows[j + 1].getElementsByTagName("TD")[2].textContent);
      
      // 根据当前排序方向判断是否需要交换
      const shouldSwap = sortAscending 
        ? currentBalance > nextBalance 
        : currentBalance < nextBalance;

      if (shouldSwap) {
        tbody.insertBefore(rows[j + 1], rows[j]);
        swapped = true;
        // 交换数组中的位置，保持数组和DOM同步
        [rows[j], rows[j + 1]] = [rows[j + 1], rows[j]];
      }
    }
    // 如果一轮没有交换，说明已经排序完成，提前退出
    if (!swapped) break;
  }

  // 切换排序方向，下一次调用时反向排序
  sortAscending = !sortAscending;
}

关键修正说明 #

1. 静态数组处理：用Array.from()把动态的rows集合转为静态数组，避免DOM变化导致遍历异常
2. 完整冒泡排序：实现双层循环，遍历所有相邻元素，完成完整排序；加入swapped标记，提前终止已排序的循环
3. 排序方向控制：用全局变量sortAscending记录当前排序状态，每次调用后切换，实现点击切换升序/降序
4. 统一交换逻辑：通过排序方向动态调整比较条件，不再使用错误的插入分支，保证排序逻辑一致性

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