Creating a Sortable Online Column with Java Script
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>