Tabloyu nasıl sıralarım

Yaratma sıralama fonksiyonu

örnek

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Bir döngü oluşturun ve şartlar karşılanana kadar devam edin. */
  hiçbir değişiklik yapılmamıştır: */
  while (switching) {
    // Öncelikle belirt: şu anda değişim yapılması gereken bir satır yok:
    switching = false;
    rows = table.rows;
    /* Tüm tablo satırlarını (başlık satırı hariç, çünkü bu başlık içerir): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Herhangi bir değişiklik yapılmadığını belirtin:
      shouldSwitch = false;
      /* Karşılaştırılacak iki öğeyi alın, biri mevcut satırdan, biri bir sonraki satırdan: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // İki satırın yer değiştirmesi gerekip gerekmediğini kontrol edin:
      if (dir == "desc") {
        // Eğer değişmesi gerekiyorsa, değişmesini gerektiren işaretle ve mevcut döngüden çıkın:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Eğer değişim yapılması gerektiği işaretlenmişse, değişimi yap ve değişimi yapıldı olarak işaretle: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Kişisel olarak deneyin

Tabloyu başlık tıklama ile sıralama yapın

“İsim” tıklanarak isme göre sıralama yapılır, “Ülke” tıklanarak ülkeye göre sıralama yapılır.

İlk tıklama sırasında, sıralama yöntemi artan (A'dan Z'ye) olacak.

Yeniden tıklama ile, sıralama yöntemi azalan (Z'den A'ya) olacak:

örnek

<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ıralama yöntemini artan olarak ayarla:
  dir = "asc";
  /* Değişim yapılması gereken satır olmadıkça süren bir döngü oluşturun: */
  while (switching) {
    // Öncelikle belirt: şu anda değişim yapılması gereken bir satır yok:
    switching = false;
    rows = table.rows;
    /* Tüm tablo satırlarını (başlık içeren ilk satır dışında) dola: */
    for (i = 1; i < (rows.length - 1); i++) {
      // Öncelikle belirt: mevcut satır ve bir sonraki satırın yer değiştirmesi gerekmez:
      shouldSwitch = false;
      /* Karşılaştırmak istediğiniz iki öğeyi al, birini mevcut satırdan, birini bir sonraki satırdan: */
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Bu iki satırın yer değiştirmesi gerekip gerekmediğini, sıralama yöntemine göre, artan veya azalan olarak kontrol et: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        if (dir == "desc") {
          // Eğer değişim yapılması gerekiyorsa, değişim yapılması gerektiği olarak işaretle ve mevcut döngüden çık:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Eğer değişim yapılması gerekiyorsa, değişim yapılması gerektiği olarak işaretle ve mevcut döngüden çık:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Eğer değişim yapılması gerektiği işaretlenmişse, değişimi yap ve değişimi yapıldı olarak işaretle: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Her değişimde, bu sayacı 1 artır:
      switchcount ++;
    }
      /* Eğer hiç değişim yapılmamışsa ve sıralama yöntemi "artan" ise, sıralama yöntemini "azalan" olarak ayarla ve tekrar while döngüsünü çalıştır. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Kişisel olarak deneyin

tabloyu rakamsal sıralama yap

örnek

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

Kişisel olarak deneyin