按tr元素内img标签数量排序表格无效果问题求助

我想实现一个排序逻辑：根据表格tr元素中img标签的数量对行排序，当当前行的img数量少于下一行时交换两者顺序。但运行代码后完全没反应，移动script标签位置也没用，表格始终没重新排序。

原代码如下：

<body>
    <table id="myTable">
        <caption>
          SF6 LeaderBoard
        </caption>
        <thead>
          <tr>
            <th scope="col">Character Icon</th>
            <th scope="col">Username</th>
            <th scope="col">Badges</th>
            <th scope="col">Faction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"></th>
            <td>fighter2</td>
            <td><img style="display: block;-webkit-user-select: none;" src ="https://i.ibb.co/NSwLYkR/MARISSA-EMBLEM.png" height="50" ></td>
            <td>Blitz</td>
          </tr>
          <tr>
            <th scope="row"><img src="https://www.fightersgeneration.com/nx9/char/ultra-sf4-chibi/chunli-ultra-sf4-chibi.png" height="100" width="100"></th>
            <td>fighter1</td>
            <td><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"> <img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"></td>
            <td>Galaxy</td>
          </tr> <tr>
            <th scope="row"><img src="https://www.fightersgeneration.com/nx9/char/ultra-sf4-chibi/chunli-ultra-sf4-chibi.png" height="100" width="100"></th>
            <td>KaiRosFGC</td>
            <td><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"> <img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"></td>
            <td>Galaxy</td>
          </tr>
        </tbody>
      </table>
   <script>
    function sortTable() {
   var table, rows, switching, i, x, y, shouldSwitch;
   table = document.getElementById("myTable");
   switching = true;
   while (switching) {
     switching = false;
     rows = table.getElementsByTagName("tr");
     for (i = 1; i < (rows.length - 1); i++) {
       shouldSwitch = false;
       x = rows[i].getElementsByTagName("td")[2].getElementsByTagName("img").length;
       console.log(x);
       y = rows[i + 1].getElementsByTagName("td")[2].getElementsByTagName("img").length;
       if (x < y) {
         shouldSwitch = true;
         break;
       }
     }
     if (shouldSwitch) {
       rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
       switching = true;
     }
   }
 }
 console.log('hello');
       </script>
</body>

问题原因 #

1. 函数未调用：定义了sortTable函数，但没有执行它，代码自然不会触发排序逻辑。
2. 包含表头行：table.getElementsByTagName("tr")会把thead里的表头tr也包含进来，排序时会干扰正常的表格行。
3. DOM查询不稳定：每次循环都重新查询tr元素，DOM结构变化后会导致索引混乱。

修复后的代码 #

<body>
    <table id="myTable">
        <caption>
          SF6 LeaderBoard
        </caption>
        <thead>
          <tr>
            <th scope="col">Character Icon</th>
            <th scope="col">Username</th>
            <th scope="col">Badges</th>
            <th scope="col">Faction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"></th>
            <td>fighter2</td>
            <td><img style="display: block;-webkit-user-select: none;" src ="https://i.ibb.co/NSwLYkR/MARISSA-EMBLEM.png" height="50" ></td>
            <td>Blitz</td>
          </tr>
          <tr>
            <th scope="row"><img src="https://www.fightersgeneration.com/nx9/char/ultra-sf4-chibi/chunli-ultra-sf4-chibi.png" height="100" width="100"></th>
            <td>fighter1</td>
            <td><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"> <img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"></td>
            <td>Galaxy</td>
          </tr> <tr>
            <th scope="row"><img src="https://www.fightersgeneration.com/nx9/char/ultra-sf4-chibi/chunli-ultra-sf4-chibi.png" height="100" width="100"></th>
            <td>KaiRosFGC</td>
            <td><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"><img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"> <img src="https://www.pikpng.com/pngl/m/31-313648_boulder-badge-rock-gym-badge-pokemon-clipart.png" height="40" width="40"></td>
            <td>Galaxy</td>
          </tr>
        </tbody>
      </table>
   <script>
    function sortTable() {
      const tbody = document.querySelector("#myTable tbody");
      // 把tbody里的tr转成数组，方便排序
      const rows = Array.from(tbody.querySelectorAll("tr"));
      
      // 按td[2]里的img数量降序排列
      rows.sort((a, b) => {
        const imgCountA = a.querySelectorAll("td")[2].querySelectorAll("img").length;
        const imgCountB = b.querySelectorAll("td")[2].querySelectorAll("img").length;
        return imgCountB - imgCountA;
      });
      
      // 清空tbody，重新插入排序后的行
      tbody.innerHTML = "";
      rows.forEach(row => tbody.appendChild(row));
    }
    
    // 页面加载完成后调用排序函数
    window.addEventListener("DOMContentLoaded", sortTable);
   </script>
</body>

修复说明 #

• 直接获取tbody里的行，避免表头被排序。
• 使用数组的sort方法替代手动冒泡，代码更简洁稳定。
• 通过DOMContentLoaded事件确保DOM加载完成后再执行排序，避免元素未加载的问题。
• 明确调用了排序函数，触发排序逻辑。

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