How to short html Table | Shorting a Table by Ascending or Descending Order in HTML

by
Share this
FacebookXEmailLinkedInWhatsApp

Learn how to short HTML Table | Shorting a Table by Ascending or Descending Order in HTML

Sorted data help the user to understand the data better, If this data is too large in rows and columns, this is necessary to keep the data sorted. In HTML you can short tables by using Javascript so the following is an example of sorting the table of HTML.

Example

<!DOCTYPE html>
<html>
<head>
<title>Sorting of Table in HTML</title>
<style>
th, td {
  text-align: left;
  padding: 10px;
  font-size:20px;
}

tr:nth-child(even) {
  background-color: #2596be;
}
table {
  border: 2px solid #ddd;
  border-spacing: 2;
  width: 50%;
  
}
</style>
</head>
<body>

<table id="meraTable">
  <tr>
    <th>My Full Name</th>
    <th>My Place</th>
  </tr>
  <tr>
    <td>Ram Prakash</td>
    <td>Muzaffarnagar</td>
  </tr>
  <tr>
    <td>Dina Nath</td>
    <td>Rurkee</td>
  </tr>
  <tr>
    <td>Tara Vati</td>
    <td>Almaspur</td>
  </tr>
  <tr>
    <td>Tara Vati</td>
    <td>Almaspur</td>
  </tr>
  <tr>
    <td>Ramu Kumar</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Mona Rani</td>
    <td>Dorala</td>
  </tr>
  <tr>
    <td>Amina Rani</td>
    <td>Dorala</td>
  </tr>
  
</table>

<script>

  var tble, rows, switchingTable, shouldSwitch, i, x, y;
  tble = document.getElementById("meraTable");
  switchingTable = true;
  
  while (switchingTable) {
    
    switchingTable = false;
    rows = tble.rows;
    
    for (i = 1; i < (rows.length - 1); i++) {
      
      shouldSwitch = false;
      
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switchingTable = true;
    }

}
</script>

</body>
</html>

Output

Share this
FacebookXEmailLinkedInWhatsApp

Leave a Comment