Creating a Sortable Online Column with Java Script

Creating a Sortable Online Column with Java Script

January 16, 2018

 

You  can create an online sortable column of data using the Java code posted here on the W3 schools site.

 

 

The code is simple to edit, just add new entries between the <td> and </td> markeers, making sure that each is separated by: 

 

  </tr>
  <tr>

 

. .  . but just have:

 

  </tr>

 

. . . after the last entry.

 

 

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 16px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}
</style>
</head>
<body>

<p>Click the button to sort the table alphabetically, by name:</p>
<p><button onclick="sortTable()">Sort</button></p>

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Stage</th>
  </tr>
  <tr>
    <td>Information Governance</td>
    <td>One</td>
  </tr>
  <tr>
    <td>Identification</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>Preservation</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>Collection</td>
    <td>Fourth</td>
  </tr>
  <tr>
    <td>Processing</td>
    <td>Fifth</td>
  </tr>
  <tr>
    <td>Review</td>
    <td>Sixth</td>
  </tr>
  <tr>
    <td>Analysis</td>
    <td>Seventh</td>
  </tr>
  <tr>
    <td>Production</td>
    <td>Eighth</td>
  </tr>
  <tr>
    <td>Presentation</td>
    <td>Ninth</td>
  </tr>
</table>

<script>
function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        //if so, mark as a switch and break the loop:
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
</script>

</body>
</html>

 

 

 

 

 

 

 

 

 

Please reload

Contact Me With Your Litigation Support Questions:

seankevinoshea@hotmail.com

  • Twitter Long Shadow

© 2015 by Sean O'Shea . Proudly created with Wix.com