Trier le tableau
importance: 5
Il y a un tableau :
<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>Il peut y avoir plus de lignes.
Écrivez le code pour le trier par la colonne "name".
La solution est courte, mais peut sembler un peu délicate, alors ici je la présente avec de nombreux commentaires :
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’algorithme pas à pas :
- Obtenez tous les
<tr>de<tbody>. - Triez-les ensuite en les comparant au contenu du premier
<td>(le champ du nom). - Insérez maintenant les nœuds dans le bon ordre par
.append(...sortedRows).
Nous n’avons pas à supprimer les éléments de ligne, il suffit de les “réinsérer”, ils quittent automatiquement l’ancien emplacement.
P.S. Dans notre cas, il y a un <tbody> explicite dans le tableau, mais même si le tableau HTML n’a pas de <tbody>, la structure DOM l’a toujours.