Come ordinare una tabella
- Pagina precedente Elenco ordinato
- Pagina successiva Tabella a strisce zebra
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 |
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; } } }
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>
ordinare la tabella in modo numerico
esempio
if (Number(x.innerHTML) > Number(y.innerHTML)) { shouldSwitch = true; break; }
- Pagina precedente Elenco ordinato
- Pagina successiva Tabella a strisce zebra