Creating a Sortable Online Column with Java Script - UPDATE
Here's an update to the Tip of the Night for January 15, 2018. This version of the code allows for an online table to be sorted alphabetically from A to Z and back again, and numerically in the second column. The same basic rules apply with respect to adding new entries.
Ugh. Two nights in a row at work at the firm past midnight. Maybe the real tip tonight should be to go hang out at Mood Ring on Myrtle Avenue in Bushwick, Brooklyn.
<!DOCTYPE html> <html> <head> <title>Sort a HTML Table Alphabetically</title> <style> table { border-spacing: 0; width: 100%; border: 1px solid #ddd; }
th { cursor: pointer; }
th, td { text-align: left; padding: 16px; }
tr:nth-child(even) { background-color: #f2f2f2 } </style> </head> <body>
<p><strong>Click the headers to sort the table.</strong></p> <p>The first time you click, the sorting direction is ascending (A to Z).</p> <p>Click again, and the sorting direction will be descending (Z to A):</p>
<table id="myTable"> <tr> <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:--> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">Stage</th> </tr> <tr> <td>Information Governance</td> <td>1</td> </tr> <tr> <td>Identification</td> <td>2</td> </tr> <tr> <td>Preservation</td> <td>3</td> </tr> <tr> <td>Collection</td> <td>4</td> </tr> <tr> <td>Processing</td> <td>5</td> </tr> <tr> <td>Review</td> <td>6</td> </tr> <tr> <td>Analysis</td> <td>7</td> </tr> <tr> <td>Production</td> <td>8</td> </tr> <tr> <td>Production</td> <td>9</td> </tr> </table>
<script> function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; //Set the sorting direction to ascending: dir = "asc"; /*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")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; /*check if the two rows should switch place, based on the direction, asc or desc:*/ if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } else if (dir == "desc") { 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; //Each time a switch is done, increase this count by 1: switchcount ++; } else { /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } </script>
</body> </html>