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.