<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>
Hi im trying to create a sorting method that takes the number of img tags in a tr element and changes the order if the element has less img tags than the next. but when i run this code nothing happens at all. I have tried to move the script tags because maybe the location was the issue but i still run into the same problem of nothing being reordered.
It is probably a lot easier using a standard array-sort for tackling the problem:
function sortTable(tblsel){
const tbd=document.querySelector(tblsel).querySelector("tbody"),
trs=[...tbd.querySelectorAll("tr")];
trs.forEach(tr=>tr.count=tr.querySelectorAll("img").length);
// the following sorts in ascending order, swap a and b for descending order:
trs.sort((a,b)=>a.count-b.count).forEach(tr=>tbd.append(tr));
}
sortTable("table");<table id="myTable" border=1>
<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>