Hvordan man sorterer tabeller

Opret sorteringsfunktion

eksempel

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Lav en løkke, indtil betingelserne er opfyldt.
  ingen bytte er blevet foretaget: */
  while (switching) {
    // Først erklær: Der er ingen rækker, der skal udveksles, i øjeblikket:
    switching = false;
    rows = table.rows;
    /* Gennemgå alle tabelrækker (undtag første række, da den indeholder rubrikker): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Først erklær at ingen bytte skal foretages:
      shouldSwitch = false;
      /* Få de to elementer, der skal sammenlignes, et fra den aktuelle række og et fra næste række: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Tjek om de to rækker skal byttes plads
      hvis (dir == "desc") {
        // Hvis der skal byttes, markeres det som nødvendigt at bytte, og udgår af den aktuelle løkke
        shouldSwitch = true;
        break;
      }
    }
    hvis (shouldSwitch) {
      /* Hvis der er markeret til udveksling, udfør udveksling og marker som udført: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Prøv det selv

Sorter tabellen ved at klikke på rubrikkerne

Klik på "Name" for at sortere efter navn, klik på "Country" for at sortere efter land.

Ved første klik vil sorteringsretningen være stigende (fra A til Z).

Ved at klikke igen, sorteringsretningen vil blive faldende (fra Z til A):

eksempel

<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;
  // Sæt sorteringsretningen til stigende:
  dir = "asc";
  /* Opret en løkke, der fortsætter, indtil der ikke er flere rækker, der skal udveksles: */
  while (switching) {
    // Først erklær: Der er ingen rækker, der skal udveksles, i øjeblikket:
    switching = false;
    rows = table.rows;
    /* Gennemløb alle tabelrækker (med undtagelse af første række, som indeholder tabelhovedet): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Først erklær: Denne række og den næste række skal ikke byttes plads:
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Tjek om disse rækker skal byttes plads, baseret på sorteringsretningen, stigende eller faldende: */
      hvis (dir == "asc") {
      hvis (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        hvis (dir == "desc") {
          // Hvis der skal udveksles, marker som til udveksling og spring ud af den aktuelle løkke:
          shouldSwitch = true;
          break;
        }
      }
        hvis (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Hvis der skal udveksles, marker som til udveksling og spring ud af den aktuelle løkke:
          shouldSwitch = true;
          break;
        }
      }
    }
    hvis (shouldSwitch) {
      /* Hvis der er markeret til udveksling, udfør udveksling og marker som udført: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Denne tæller øges med 1 hver gang der foretages en udveksling:
      switchcount ++;
    }
      /* Hvis ingen udveksling er foretaget og sorteringsretningen er "stigende", sæt sorteringsretningen til "faldende" og kør while-løkken igen. */
      hvis (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Prøv det selv

sorter tabellen numerisk

eksempel

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

Prøv det selv