Seřaďte tabulku
důležitost: 5
Máme následující tabulku:
<table>
<thead>
<tr>
<th>Jméno</th><th>Příjmení</th><th>Věk</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan</td><td>Novák</td><td>10</td>
</tr>
<tr>
<td>Petr</td><td>Horák</td><td>15</td>
</tr>
<tr>
<td>Anna</td><td>Králová</td><td>5</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</tbody>
</table>Může obsahovat další řádky.
Napište kód, který ji seřadí podle sloupce "jméno".
Řešení je krátké, ale může vypadat trochu komplikovaně, proto je opatřím rozsáhlými komentáři:
let seřazenéŘádky = Array.from(tabulka.tBodies[0].rows) // 1
.sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
tabulka.tBodies[0].append(...seřazenéŘádky); // (3)Algoritmus krok za krokem:
- Získáme z
<tbody>všechny značky<tr>. - Pak je seřadíme podle obsahu první značky
<td>(pole se jménem). - Nyní vložíme uzly ve správném pořadí pomocí
.append(...seřazenéŘádky).
Nemusíme elementy řádků odstraňovat, stačí je „znovu vložit“ a z původního umístění se odstraní automaticky.
P.S. V našem případě je v tabulce explicitně uvedeno <tbody>, ale i kdyby HTML tabulka <tbody> neobsahovala, DOM struktura je vždy bude mít.