JavaScript से HTML टेबल कैसे सॉर्ट करें?

HTML टेबल को JavaScript से सॉर्ट करना

JavaScript का उपयोग करके HTML टेबल को वर्णानुक्रम (अल्फाबेटिकली) सॉर्ट करने का कोड:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <title>HTML टेबल को अल्फाबेटिकली सॉर्ट करें</title>
  <style>
    button { padding: 10px; margin-bottom: 5px; font-size: 16px; font-weight: bold; }
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    table { border-spacing: 0; width: 100%; border: 1px solid #ddd; }
    th, td { border-top: 1px solid black; text-align: left; padding: 16px; }
  </style>
</head>
<body>
  <h1>टेबल सॉर्टिंग उदाहरण</h1>
  <button onclick="sortTable()">सॉर्ट</button>
  <table class="filterTable">
    <tr><th>नाम</th><th>जन्म महीना</th></tr>
    <tr><td>रॉन</td><td>जनवरी</td></tr>
    <tr><td>शॉन</td><td>अप्रैल</td></tr>
    <tr><td>कालेब</td><td>दिसंबर</td></tr>
    <tr><td>ब्रूनो</td><td>फरवरी</td></tr>
    <tr><td>जैक</td><td>अक्टूबर</td></tr>
    <tr><td>मैक्स</td><td>नवंबर</td></tr>
  </table>
  
  <script>
    function sortTable() {
      var filterTable, rows, sorted, i, x, y, sortFlag;
      filterTable = document.querySelector(".filterTable");
      sorted = true;
      while (sorted) {
        sorted = false;
        rows = filterTable.rows;
        for (i = 1; i < rows.length - 1; i++) {  // हेडर (0) छोड़ें
          sortFlag = false;
          x = rows[i].getElementsByTagName("TD")[0];
          y = rows[i + 1].getElementsByTagName("TD")[0];
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            sortFlag = true; break;
          }
        }
        if (sortFlag) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          sorted = true;
        }
      }
    }
  </script>
</body>
</html>

आउटपुट

• प्रारंभ में: रॉन, शॉन, कालेब, ब्रूनो, जैक, मैक्स (अनसॉर्टेड)
• "सॉर्ट" क्लिक करने पर: ब्रूनो, जैक, कालेब, मैक्स, रॉन, शॉन (A-Z)

एल्गोरिदम विश्लेषण

• **बबल सॉर्ट** वेरिएंट - O(n²) समय जटिलता
• केस-इनसेंसिटिव तुलना (toLowerCase())
• केवल पहली कॉलम (इंडेक्स 0) पर सॉर्ट करता है
• DOM मैनिपुलेशन: insertBefore से रो मूव करता है

बेहतर आधुनिक दृष्टिकोण

function sortTableModern(columnIndex = 0, ascending = true) {
  const table = document.querySelector('.filterTable');
  const tbody = table.tBodies[0] || table;
  const rows = Array.from(tbody.rows).slice(1); // हेडर छोड़ें
  
  rows.sort((a, b) => {
    const aText = a.cells[columnIndex].textContent.trim().toLowerCase();
    const bText = b.cells[columnIndex].textContent.trim().toLowerCase();
    return ascending ? aText.localeCompare(bText) : bText.localeCompare(aText);
  });
  
  rows.forEach(row => tbody.appendChild(row));  // DOM में पुनः क्रमित
}

// उपयोग: sortTableModern(0, true);  // कॉलम 0, आरोही

एन्हांसमेंट्स

• कॉलम हेडर क्लिक पर सॉर्ट (टॉगल आरोही/अवरोही)
• सॉर्ट इंडिकेटर (▲/▼) दिखाएं
• नंबर/डेट टाइप डिटेक्शन
• मल्टी-कॉलम सॉर्ट