动态生成Table按字母排序异常求助：静态正常动态环境失效

我来帮你分析下问题所在，以及对应的解决方案：

问题根源：动态HTMLCollection的“实时更新”特性 #

你代码里的rows = table.getElementsByTagName("tr")返回的是动态HTMLCollection——这个集合会随着DOM的修改自动同步变化。当你在排序过程中用insertBefore交换行的位置时，这个rows集合会立刻更新，导致循环的索引逻辑彻底混乱：原本有10行，交换一行后集合长度可能突然变化，循环提前终止，也就出现了你看到的“循环内rows长度仅为1”的情况。

解决方案：把动态集合转成静态数组 #

我们只需要把动态的rows转换成静态的数组，这样DOM的修改就不会影响数组的内容，循环可以稳定执行。同时还要注意交换DOM后同步更新数组的顺序，保证下一轮排序的比较逻辑正确。

修改后的sortTable函数：

function sortTable() { 
  let table, rows, switching, i, x, y, shouldSwitch; 
  table = document.getElementById("manga-tracker").getElementsByTagName('table')[0]; 
  switching = true; 

  // 关键：把动态HTMLCollection转为静态数组
  rows = Array.from(table.getElementsByTagName("tr"));

  while (switching) { 
    switching = false; 

    // 循环范围基于静态数组的长度，不会再动态变化
    for (i = 1; i < rows.length - 1; i++) { 
      shouldSwitch = false; 

      // 用标准的textContent获取文本，替代非标准的.text
      x = rows[i].querySelector("td:nth-child(2) a").textContent.toLowerCase();
      y = rows[i + 1].querySelector("td:nth-child(2) a").textContent.toLowerCase();

      console.log(`x: ${x}, y: ${y}`); 

      if (x > y) { 
        shouldSwitch = true; 
        break; 
      } 
    } 

    if (shouldSwitch) { 
      // 交换DOM中的行位置
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); 
      // 同步交换数组中的元素顺序，保证下一轮循环的比较基于最新行顺序
      [rows[i], rows[i + 1]] = [rows[i + 1], rows[i]];
      switching = true; 
    } 
  } 
}

额外注意：确保排序在表格渲染完成后执行 #

还要保证sortTable是在动态表格完全生成之后才调用的，所以把它放到populateMangaTracker的getJSON回调末尾：

$.getJSON('populate-mangatracker.php', function(data){ 
  $.each( data, function( key, val ) { 
    // 生成表格行的原有代码...
  }); 

  // 绑定点击事件的原有代码...

  // 表格渲染完成后再调用排序
  sortTable();
});

这样修改后，你的排序功能应该就能正常工作了。

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