Miten järjestää taulukko

Luo järjestysfunktio

esimerkki

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Tee silmukka, kunnes ehdot täyttyvät.
  /* Ei vaihtoa on tehty: */
  while (switching) {
    // Ensiksi ilmoitus: ei ole rivejä vaihdettavaksi:
    switching = false;
    rows = table.rows;
    /* Käydään läpi kaikki taulukon rivit (ensimmäinen rivi lukuun ottamatta, koska se sisältää otsikon): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Ensiksi julistetaan, ettei vaihtoa tulisi tehdä:
      shouldSwitch = false;
      /* Saadaan vertailtavaksi kaksi elementtiä, yksi nykyisestä rivistä ja toinen seuraavasta rivistä: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Tarkistetaan, pitäisikö kaksi riviä vaihtaa paikkoja:
      if (dir == "desc") {
        // Jos vaihto on tarpeen, merkataan vaihto tarpeelliseksi ja poistutaan nykyisestä silmukasta
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Jos on merkitty vaihdettavaksi, suorita vaihto ja merkki vaihdetuksi: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Kokeile itse

Järjestä taulukko napsauttamalla otsikkoa

Napsauta "Name" nimen mukaan ja "Country" maan mukaan.

Ensimmäisellä napsautuksella järjestys on nouseva (A:sta Z:ään).

Toistuvaa napsauttamista järjestää laskevasti (A:sta Z:ään):

esimerkki

<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;
  // Aseta järjestys suunta nousevaksi:
  dir = "asc";
  /* Luo silmukka, joka jatkuu, kunnes ei ole rivejä vaihdettavaksi: */
  while (switching) {
    // Ensiksi ilmoitus: ei ole rivejä vaihdettavaksi:
    switching = false;
    rows = table.rows;
    /* Käy läpi kaikki taulukkorivit (lukuun ottamatta ensimmäistä, koska se sisältää otsikot): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Ensiksi ilmoitus: nykyinen rivi ja seuraava rivi eivät ole vaihdettavissa:
      shouldSwitch = false;
      /* Hae haluamasi kaksi elementtiä, yksi nykyiseltä riviltä ja toinen seuraavalta riviltä: */
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Tarkista, pitäisikö nämä kaksi riviä vaihtaa paikkaansa, perustuen järjestys suuntaan, nouseva tai laskeva: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        if (dir == "desc") {
          // Jos pitäisi vaihtaa, merkki vaihdettavaksi ja lopeta nykyinen silmukka:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Jos pitäisi vaihtaa, merkki vaihdettavaksi ja lopeta nykyinen silmukka:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Jos on merkitty vaihdettavaksi, suorita vaihto ja merkki vaihdetuksi: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Lisää tämä laskuri 1:llä joka vaihdossa:
      switchcount ++;
    }
      /* Jos ei ole tehty vaihtoa ja järjestys suunta on "nouseva", aseta järjestys suunta "laskeva" ja suorita while-silmukka uudelleen. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Kokeile itse

järjestä taulukko numerollaan

esimerkki

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

Kokeile itse