GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing da.javascript.info — Sorter tabellen

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.

Åbn en sandbox til opgaven.

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.

Åbn løsningen i en sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.