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".
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.