JavaScript Ordina tabella HTML

Spesso ci imbattiamo in situazioni in cui vogliamo rendere interattivi i nostri tavoli. Potremmo volerli ordinare semplicemente con un clic sulla colonna o con qualsiasi altro metodo. HTML non ha alcuna capacità di programmazione, quindi dobbiamo usare JavaScript per ordinare una tabella HTML. Sfortunatamente, non esiste un metodo integrato che ci aiuti a ordinare l’array. Pertanto scriviamo il nostro metodo personalizzato sfruttando le capacità di manipolazione del DOM e le funzioni di confronto. Questo tutorial insegna come ordinare le tabelle HTML utilizzando JavaScript.

Ordina tabelle HTML usando JavaScript

Il metodo definito dall’utente utilizza le seguenti due funzioni di supporto per ordinare l’array.

• getCellValue()

Una funzione per ottenere il contenuto da una cella data la riga della tabella e l’indice di colonna.

Usiamo la proprietà children della riga della tabella per selezionare la colonna ith usando tr.children[i] e quindi usiamo la sua proprietà innerText o textContent per ottenere il contenuto effettivo memorizzato. Una volta ottenuto il contenuto effettivo in una cella, possiamo utilizzare un comparatore personalizzato per confrontare e ordinare questi valori.

• comparer()

Una funzione per confrontare i valori di due elementi in una determinata tabella.

Per prima cosa otteniamo il contenuto delle celle utilizzando la funzione getCellValue() con un indice di riga e colonna specificato. Quindi controlliamo che entrambi siano interi o stringhe validi e quindi li confrontiamo per trovare l’ordine corretto.

Algoritmo

Codice

const getCellValue = (tableRow, columnIndex) =>
    tableRow.children[columnIndex].innerText ||
    tableRow.children[columnIndex].textContent;

const comparer = (idx, asc) => (r1, r2) =>
    ((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
         el1 - el2 :
         el1.toString().localeCompare(el2))(
        getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));

// do the work...
document.querySelectorAll('th').forEach(
    th => th.addEventListener(
        'click', (() => {
          const table = th.closest('table');
          Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
              .sort(comparer(
                  Array.from(th.parentNode.children).indexOf(th),
                  this.asc = !this.asc))
              .forEach(tr => table.appendChild(tr));
        })));

Tutti i principali browser supportano tutti i metodi discussi sopra.