तालिका को कैसे सॉर्ट करें

सॉर्टिंग फ़ंक्शन बनाएं

उदाहरण

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* एक चक्र बनाएं जब तक की शर्त पूरी हो जाए: */
  कोई विनिमय नहीं किया गया है: */
  // पहले घोषणा करें: वर्तमान में कोई रेखा विनिमय करने की आवश्यकता नहीं है:
    switching = false;
    rows = table.rows;
    /* सभी तालिका रेखाओं को घूमें (पहली रेखा को छोड़कर, जो शीर्षक है): */
    /* सभी तालिका पंक्तियों को दौर करें (पहली पंक्ति को छोड़कर, जो शीर्षक को शामिल करती है): */
    // पहले घोषणा करें: वर्तमान रेखा और अगली रेखा को विनिमय करने की आवश्यकता नहीं है:
      // कोई विनिमय नहीं किया जाना है:
      /* आप जो दो तत्वों को तुलना करना चाहते हैं, एक वर्तमान रेखा से और एक अगली रेखा से: */
      /* तुलना करने वाले दो तत्वों को प्राप्त करें, एक वर्तमान पंक्ति से और एक अगले पंक्ति से: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // दो पंक्तियाँ स्थानांतरण करने के लिए होनी चाहिए क्या:
      else if (dir == "desc") {
        // यदि विनिमय करना चाहिए, तो इसे आवश्यकता से चिह्नित करें और मौजूदा चक्र से बाहर निकलें
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* यदि विनिमय करने के लिए चिह्नित किया गया है, तो विनिमय करें और विनिमय किया गया चिह्नित करें: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

स्वयं प्रयोग करें

तालिका को शीर्षक पर क्लिक करके क्रमण्ड करें

"Name" पर क्लिक करके नाम पर क्रमण्ड करें, "Country" पर क्लिक करके देश पर क्रमण्ड करें.

पहली बार दबाए जाने पर, क्रमण्ड दिशा वृद्धी होगी (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;
  // क्रमबद्धता दिशा को उदार रखें:
  /* एक चक्र बनाएं जो रेखाओं को विनिमय करने की आवश्यकता नहीं होने तक चलता रहेगा: */
  while (switching) {
  // पहले घोषणा करें: वर्तमान में कोई रेखा विनिमय करने की आवश्यकता नहीं है:
    switching = false;
    rows = table.rows;
    /* सभी तालिका रेखाओं को घूमें (पहली रेखा को छोड़कर, जो शीर्षक है): */
    for (i = 1; i < (rows.length - 1); i++) {
    // पहले घोषणा करें: वर्तमान रेखा और अगली रेखा को विनिमय करने की आवश्यकता नहीं है:
      shouldSwitch = false;
      /* आप जो दो तत्वों को तुलना करना चाहते हैं, एक वर्तमान रेखा से और एक अगली रेखा से: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* इस दो रेखाओं को क्रमबद्ध स्थानों के बीच विनिमय करने के लिए क्या चेक करें, आधार दिशा, उदार या विपरीत: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        else if (dir == "desc") {
          // यदि विनिमय करना चाहिए, तो चिह्नित करें और वर्तमान चक्र से बाहर निकलें:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // यदि विनिमय करना चाहिए, तो चिह्नित करें और वर्तमान चक्र से बाहर निकलें:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* यदि विनिमय करने के लिए चिह्नित किया गया है, तो विनिमय करें और विनिमय किया गया चिह्नित करें: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // हर विनिमय के लिए इस काउंटर को 1 बढ़ाएं:
      switchcount ++;
    }
      /* यदि कोई विनिमय नहीं किया गया है और क्रमबद्धता दिशा "उदार" है, तो क्रमबद्धता दिशा को "विपरीत" रखें और फिर वाली बार जूलाई चक्र चलाएं। */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

स्वयं प्रयोग करें

तालिका को संख्या के अनुसार क्रमबद्ध करें

उदाहरण

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

स्वयं प्रयोग करें