Cách sắp xếp bảng

Tạo hàm sắp xếp

thực例

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Tạo một vòng lặp cho đến khi đáp ứng điều kiện.
  không có thay đổi nào đã được thực hiện: */
  while (switching) {
    // Đầu tiên tuyên bố: hiện tại không có hàng nào cần đổi vị trí:
    switching = false;
    rows = table.rows;
    /* Duyệt qua tất cả các hàng trong bảng (trừ hàng đầu tiên vì nó chứa tiêu đề bảng): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Đầu tiên, không nên thay đổi bất kỳ gì:
      shouldSwitch = false;
      /* Lấy hai phần tử cần so sánh, một từ hàng hiện tại, một từ hàng tiếp theo: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Kiểm tra hai hàng có nên thay đổi vị trí hay không:
      if (dir == "desc") {
        // Nếu cần thay đổi, đánh dấu là cần thay đổi và thoát khỏi vòng lặp hiện tại
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Nếu đã được đánh dấu cần trao đổi, thì thực hiện trao đổi và đánh dấu đã thực hiện trao đổi: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Thử ngay

Sắp xếp bảng thông qua việc nhấn vào tiêu đề bảng

Nhấn vào "Tên" để sắp xếp theo tên, nhấn vào "Quốc gia" để sắp xếp theo quốc gia.

Lần nhấn đầu tiên, hướng sắp xếp sẽ là tăng dần (từ A đến Z).

Nhấn lại, hướng sắp xếp sẽ là giảm dần (từ Z đến A):

thực例

<table id="myTable2">
<tr>
<!--Khi nhấn vào tiêu đề bảng, chạy hàm sortTable và truyền một tham số, 0 là sắp xếp theo tên, 1 là sắp xếp theo quốc gia: -->
<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;
  // Đặt hướng sắp xếp thành tăng dần:
  dir = "asc";
  /* Tạo một vòng lặp sẽ tiếp tục cho đến khi không có hàng nào cần đổi vị trí: */
  while (switching) {
    // Đầu tiên tuyên bố: hiện tại không có hàng nào cần đổi vị trí:
    switching = false;
    rows = table.rows;
    /* Duyệt qua tất cả các hàng bảng (trừ hàng đầu tiên, vì nó chứa tiêu đề bảng): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Đầu tiên tuyên bố: hàng hiện tại và hàng tiếp theo không nên đổi vị trí:
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Kiểm tra hai hàng này có nên đổi vị trí hay không, dựa trên hướng sắp xếp, tăng dần hoặc giảm dần: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        if (dir == "desc") {
          // Nếu cần trao đổi, đánh dấu cần trao đổi và thoát khỏi vòng lặp hiện tại:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // Nếu cần trao đổi, đánh dấu cần trao đổi và thoát khỏi vòng lặp hiện tại:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Nếu đã được đánh dấu cần trao đổi, thì thực hiện trao đổi và đánh dấu đã thực hiện trao đổi: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Mỗi lần thực hiện trao đổi, bộ đếm này tăng 1:
      switchcount ++;
    }
      /* Nếu không có sự trao đổi và hướng sắp xếp là "tăng dần", thì đặt hướng sắp xếp thành "giảm dần" và chạy lại vòng lặp while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Thử ngay

sắp xếp bảng theo số liệu

thực例

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

Thử ngay