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

تولید کارکرد مرتب‌سازی

مثال

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* ایک سیکشن بنائیں، جب تک شرط کا مطلب نہیں پورا ہوگا. */
  */ کوئی تبادلہ نہیں کیا گیا: */
  در حالی که (switching) {
    // ابتدا اعلام کنید: هیچ ردیفی برای تبادل وجود ندارد:
    switching = false;
    rows = table.rows;
    /* جداول کا سارا سطر پارو (پہلا سطر چھوڑ کر، جس میں سربرگ شامل ہوتا ہے): */
    برای (i = 1; i < (rows.length - 1); i++) {
      // ابتدا میں تبادلہ نہ کریں:
      /* عناصر مورد نظر خود را دریافت کنید، یکی از ردیف فعلی و یکی از ردیف بعدی: */
      /* مقابلو کریں والے دو عناصر کو حاصل کریں، ایک سطر سے اور ایک سطر سے: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // دو سطر کو تبادلہ کرنا چاہئے یا نہیں جانچ کریں:
      اگر (dir == "desc") {
        // اگر تبادلہ کرنا چاہئے تو مارکرکا رکھیں، اور موجودہ سیکشن سے باآگاہ نکلیں
        shouldSwitch = true;
        break;
      }
    }
    اگر (shouldSwitch) {
      /* اگر به عنوان نیاز به تبادل مشخص شده است، تبادل را انجام دهید و مشخص کنید که تبادل انجام شده است: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

آزمایش کنید

جبغه پر کلک کریں، تاکہ جداول کو ترتیب دیں

‘نام’ پر کلک کریں تاکہ نام کا ترتیب، ‘ملک’ پر کلک کریں تاکہ ملک کا ترتیب.

پہلی بار کلک کریں، ترتیب کا حوالہ اضافی ترتیب کا ہوگا (A سے Z تک).

پھر ایک بار کلک کریں، ترتیب کا حوالہ نزولی ترتیب کا ہوگا (Z سے A تک):

مثال

<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;
  // جهت مرتب‌سازی را به افزایشی تنظیم کنید:
  dir = "asc";
  /* یک چرخه ایجاد کنید که تا زمانی که هیچ ردیفی برای تبادل وجود ندارد ادامه دهد: */
  در حالی که (switching) {
    // ابتدا اعلام کنید: هیچ ردیفی برای تبادل وجود ندارد:
    switching = false;
    rows = table.rows;
    /* همه ردیف‌های جدول را (به جز اولین ردیف که شامل عنوان جدول است) مرور کنید: */
    برای (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      /* عناصر مورد نظر خود را دریافت کنید، یکی از ردیف فعلی و یکی از ردیف بعدی: */
      x = rows[i].getElementsByTagName("TD")[n];
      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;
      // هر بار که تبادل انجام می‌شود، این شمارنده افزایش می‌یابد:
      switchcount ++;
    }
      /* اگر هیچ تبادل انجام نشده و جهت مرتب‌سازی "تأمین" است، جهت مرتب‌سازی را به "تغییر" تنظیم کنید و دوباره چرخه while را اجرا کنید. */
      اگر (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

آزمایش کنید

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

مثال

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

آزمایش کنید