GeezerVison

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

GeezerVison is showing it.javascript.info — Ordina la tabella

Ordina la tabella

importanza: 5

Ecco una tabella:

<table>
<thead>
  <tr>
    <th>Name</th><th>Surname</th><th>Age</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td><td>Smith</td><td>10</td>
  </tr>
  <tr>
    <td>Pete</td><td>Brown</td><td>15</td>
  </tr>
  <tr>
    <td>Ann</td><td>Lee</td><td>5</td>
  </tr>
  <tr>
    <td>...</td><td>...</td><td>...</td>
  </tr>
</tbody>
</table>

Potrebbero esserci più file dentro.

Scrivi il codice per ordinarla in base alla colonna "name".

Apri una sandbox per l'esercizio.

La soluzione è breve, ma potrebbe sembrare difficile, quindi la commenteremo in dettaglio:

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)

L’algoritmo passo per passo:

Trova tutti i <tr> dentro <tbody>.
Ordinali comparando il contenuto del primo <td> (il campo con il nome).
Ora inserisci i nodi nel giusto ordine con .append(...sortedRows).

Non dobbiamo rimuovere gli elementi della fila, solo “re-inserirli”, lasciano automaticamente il vecchio posto.

P.S. Nel nostro caso c’è un esplicito <tbody> nella tabella; ma se anche non vi fosse, la struttura DOM lo include sempre e comunque.

Apri la soluzione in una 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.