Bagaimana untuk mengurutkan jadual

Buat fungsi pengurutan

contoh

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Buat putarannya sampai memenuhi syarat.
  tidak ada pertukaran yang dilakukan: */
  while (switching) {
    // Awalnya: tiada baris yang seharusnya ditukar:
    switching = false;
    rows = table.rows;
    /* Lompat melalui semua baris tabel (kecuali baris pertama, karena mengandung tajuk tabel): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Pertama, mengumumkan bahwa tidak seharusnya ada pertukaran apapun:
      shouldSwitch = false;
      /* Mendapatkan dua elemen yang akan dibandingkan, satu dari baris saat ini, dan satu dari baris berikutnya: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Periksa apakah baris kedua dan pertama seharusnya diganti tempatnya:
      jika (dir == "desc") {
        // Jika seharusnya diganti, tandai sebagai perlu diganti, dan keluar dari putarannya.
        shouldSwitch = true;
        break;
      }
    }
    jika (shouldSwitch) {
      /* Jika telah ditandai untuk pertukaran, lakukan pertukaran dan tandai bahwa pertukaran telah dilakukan: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

亲自试一试

Mengurutkan tabel melalui klik tajuk tabel

Klik "Name" untuk mengurutkan berdasarkan nama, klik "Country" untuk mengurutkan berdasarkan negara.

Pada kali pertama klik, arah pengurutan adalah naik (dari A ke Z).

Sekali klik, arah pengurutan akan menjadi turun (dari Z ke A):

contoh

<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;
  // Tetapkan arah pengurutan kepada urut naik:
  dir = "asc";
  /* Cipta satu lingkaran yang akan terus berlaku, sehingga tiada baris yang seharusnya ditukar: */
  while (switching) {
    // Awalnya: tiada baris yang seharusnya ditukar:
    switching = false;
    rows = table.rows;
    /* Lengkapkan semua baris jadual (kecuali baris pertama, kerana ia mengandungi tajuk): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Awalnya: baris semasa dan baris berikutnya seharusnya tidak ditukar tempatnya:
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Periksa sama ada baris ini dan baris berikutnya seharusnya ditukar tempatnya, berdasarkan arah pengurutan, urut naik atau turun: */
      jika (dir == "asc") {
      jika (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        jika (dir == "desc") {
          // Jika seharusnya pertukaran, tandai untuk pertukaran dan keluar dari lingkaran perulangan semasa:
          shouldSwitch = true;
          break;
        }
      }
        jika (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Jika seharusnya pertukaran, tandai untuk pertukaran dan keluar dari lingkaran perulangan semasa:
          shouldSwitch = true;
          break;
        }
      }
    }
    jika (shouldSwitch) {
      /* Jika telah ditandai untuk pertukaran, lakukan pertukaran dan tandai bahwa pertukaran telah dilakukan: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Setiap kali pertukaran dilakukan, penambah ini di tambah 1:
      switchcount ++;
    }
      /* Jika tiada pertukaran dilakukan dan arah pengurutan adalah "naik", tukar arah pengurutan kepada "turun" dan jalankan semula lingkaran while. */
      jika (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

亲自试一试

atur jadual menurut nombor

contoh

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

亲自试一试