Come ordinare una tabella

Impara come usare JavaScript per ordinare una tabella HTML.

Clicca sul pulsante per ordinare alfabeticamente per nome del cliente la tabella:

Name Country
Berglunds snabbkop Sweden
North/South UK
Alfreds Futterkiste Germany
Koniglich Essen Germany
Magazzini Alimentari Riuniti Italy
Paris specialites France
Island Trading UK
Laughing Bacchus Winecellars Canada

Prova personalmente

Creare la funzione di ordinamento

esempio

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Crea un ciclo fino a quando non si verifica la condizione. */
  nessun scambio è stato effettuato: */
  while (switching) {
    // Prima di tutto: non ci sono righe da scambiare:
    rows = table.rows;
    /* Eseguire un ciclo su tutte le righe della tabella (tranne la prima, poiché contiene l'intestazione della tabella): */
    /* Esamina tutte le righe della tabella (eccetto la prima, che contiene l'intestazione): */
    // Prima di tutto: la riga corrente e la riga successiva non dovrebbero essere scambiate di posizione:
      // Prima di tutto, dichiara che non dovrebbe essere effettuato alcun scambio:
      /* Ottenere gli elementi che si desidera confrontare, uno dalla riga corrente e uno dalla riga successiva: */
      /* Ottieni gli elementi da confrontare, uno dalla riga corrente e uno dalla riga successiva: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Verifica se due righe devono essere scambiate di posizione:
      if (dir == "desc") {
        // Se dovessero essere scambiati, segna come da scambiare e esci dal ciclo corrente
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Se è stato contrassegnato per lo scambio, eseguire lo scambio e contrassegnare che è stato effettuato lo scambio: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Prova personalmente

Ordina la tabella cliccando sulle intestazioni

Cliccando su "Nome" si ordina per nome, cliccando su "Paese" si ordina per paese.

Al primo clic, l'ordinamento sarà in ordine crescente (da A a Z).

Selezionare di nuovo per ordinare in ordine decrescente (da Z a A):

Name Country
Berglunds snabbkop Sweden
North/South UK
Alfreds Futterkiste Germany
Koniglich Essen Germany
Magazzini Alimentari Riuniti Italy
Paris specialites France
Island Trading UK
Laughing Bacchus Winecellars Canada

esempio

<table id="myTable2">
<tr>
<!--当表头被点击时,运行 sortTable 函数,并传递一个参数,0 表示按姓名排序,1 表示按国家排序:--->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // Impostare la direzione di ordinamento in ordine ascendente:
  dir = "asc";
  /* Creare un ciclo che continua fino a quando non ci sono più righe da scambiare: */
  while (switching) {
    // Prima di tutto: non ci sono righe da scambiare:
    rows = table.rows;
    /* Eseguire un ciclo su tutte le righe della tabella (tranne la prima, poiché contiene l'intestazione della tabella): */
    for (i = 1; i < (rows.length - 1); i++) {
    // Prima di tutto: la riga corrente e la riga successiva non dovrebbero essere scambiate di posizione:
      shouldSwitch = false;
      /* Ottenere gli elementi che si desidera confrontare, uno dalla riga corrente e uno dalla riga successiva: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Verificare se queste due righe dovrebbero essere scambiate di posizione, basandosi sulla direzione di ordinamento, ascendente o discendente: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        if (dir == "desc") {
          // Se dovrebbe essere scambiato, contrassegnare come da scambiare e uscire dal ciclo corrente:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Se dovrebbe essere scambiato, contrassegnare come da scambiare e uscire dal ciclo corrente:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Se è stato contrassegnato per lo scambio, eseguire lo scambio e contrassegnare che è stato effettuato lo scambio: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Questo contatore aumenta di 1 ogni volta che si effettua uno scambio:
      switchcount ++;
    }
      /* Se non sono stati effettuati scambi e la direzione di ordinamento è "ascendente", impostare la direzione di ordinamento su "decrescente" e eseguire di nuovo il ciclo while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Prova personalmente

ordinare la tabella in modo numerico

esempio

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
}

Prova personalmente