چگونه جدول را مرتب کنیم

ایجاد توابع مرتب‌سازی

مثال

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Make a loop until the condition is met. */
  no switching has been done: */
  در حالی که (switching) {
    // ابتدا اعلام کنید: هیچ ردیفی برای تبادل وجود ندارد:
    switching = false;
    rows = table.rows;
    /* Traverse all table rows (except the first one, which contains the header): */
    برای (i = 1; i < (rows.length - 1); i++) {
      // First declare that no exchange should be made:
      shouldSwitch = false;
      /* Get the two elements to compare, one from the current row and one from the next row: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the two rows should be swapped positions:
      اگر (dir == "desc") {
        // If an exchange should be made, mark it as needing exchange and exit the current loop
        shouldSwitch = true;
        break;
      }
    }
    اگر (shouldSwitch) {
      /* اگر برچسب‌گذاری شده باشد که باید تبادل شود، تبادل را انجام دهید و برچسب تبادل شده را قرار دهید: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

به طور مستقیم امتحان کن

Sort the table by clicking on the table header

Click "Name" to sort by name, click "Country" to sort by country.

The sorting order is ascending (from A to Z) when clicked for the first time.

Upon clicking again, the sorting order will be descending (from Z to A):

مثال

<table id="myTable2">
<tr>
<!-- When the table header is clicked, run the sortTable function and pass a parameter, 0 means sort by name, 1 means sort by country: -->
<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;
  // مسیر مرتب‌سازی را به افزایشی تنظیم کنید:
  dir = "asc";
  /* حلقه‌ای ایجاد کنید که تا زمانی که هیچ ردیفی برای تبادل وجود نداشته باشد، ادامه دهد: */
  در حالی که (switching) {
    // ابتدا اعلام کنید: هیچ ردیفی برای تبادل وجود ندارد:
    switching = false;
    rows = table.rows;
    /* همه ردیف‌های جدول را مرور کنید (به جز ردیف اول، زیرا شامل عنوان جدول است): */
    برای (i = 1; i < (rows.length - 1); i++) {
      // ابتدا اعلام کنید: ردیف فعلی و ردیف بعدی نباید با هم تبادل شوند:
      shouldSwitch = false;
      /* عناصر مورد نظر خود را دریافت کنید، یکی از ردیف فعلی و دیگری از ردیف بعدی: */
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* بررسی کنید که این دو ردیف باید به جا خود مبادله شوند یا خیر، بر اساس مسیر مرتب‌سازی، افزایشی یا تنزل‌آمیز: */
      اگر (dir == "asc") {
      اگر (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        اگر (dir == "desc") {
          // اگر باید تبادل شود، برچسب تبادل شده قرار دهید و از حلقه فعلی خارج شوید:
          shouldSwitch = true;
          break;
        }
      }
        اگر (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // اگر باید تبادل شود، برچسب تبادل شده قرار دهید و از حلقه فعلی خارج شوید:
          shouldSwitch = true;
          break;
        }
      }
    }
    اگر (shouldSwitch) {
      /* اگر برچسب‌گذاری شده باشد که باید تبادل شود، تبادل را انجام دهید و برچسب تبادل شده را قرار دهید: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // هر بار که تبادل انجام می‌شود، این شمارنده 1 افزایش می‌یابد:
      switchcount ++;
    }
      /* اگر هیچ تبادل انجام نشده باشد و مسیر مرتب‌سازی باشد"افزایشی"، مسیر مرتب‌سازی را به"تنزل‌آمیز" تنظیم کنید و دوباره حلقه while را اجرا کنید. */
      اگر (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

به طور مستقیم امتحان کن

جدول را بر اساس عددی مرتب کنید

مثال

اگر (عدد (x.innerHTML) از عدد (y.innerHTML) بیشتر باشد) {
  shouldSwitch = true;
  break;
}

به طور مستقیم امتحان کن