Sorter tabellen
vigtighed: 5
Der er en tabel:
<table>
<thead>
<tr>
<th>Navn</th><th>Efternavn</th><th>Alder</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vibeke</td><td>Langholm</td><td>10</td>
</tr>
<tr>
<td>Felix</td><td>Nielsen</td><td>15</td>
</tr>
<tr>
<td>Carla</td><td>Bratskov</td><td>5</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</tbody>
</table>Der kan være flere rækker i den.
Skriv koden til at sortere den efter "Navn"-kolonnen.
Løsningen er kort, men kan se lidt tricky ud, så her leverer jeg den med omfattende kommentarer:
let sortedRows = Array.from(table.tBodies[0].rows) // 1
.sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
table.tBodies[0].append(...sortedRows); // (3)Algoritmen trin for trin er:
- Hent alle
<tr>, fra<tbody>. - Sorter dem ved at sammenligne indholdet af det første
<td>(navnefeltet). - Indsæt nu nodene i den rigtige rækkefølge ved hjælp af
.append(...sortedRows).
Vi behøver ikke at fjerne rækkelementerne, bare “genindsætte” dem – de forlader den gamle plads automatisk.
P.S. I vores tilfælde er der en eksplicit <tbody> i tabellen, men selvom HTML-tabellen ikke har <tbody>, har DOM-strukturen altid en.