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 }

function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("sortableTable"); switching = true; dir = "asc"; //Set the sorting direction to ascending: while (switching) { //Make a loop that will continue until no switching has been done switching = false; //start by saying: no switching is done rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { //Loop through all table rows (except the first, which contains table headers): shouldSwitch = false; //start by saying there should be no switching: x = rows[i].getElementsByTagName("TD")[n]; //Get the two elements you want to compare, one from current row and one from the next: y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { //check if the two rows should switch place, based on the direction, asc or desc if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; //if so, mark as a switch and break the loop: break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; //if so, mark as a switch and break the loop: 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; switchcount++; //Each time a switch is done, increase this count by 1: } else { if (switchcount == 0 && dir == "asc") { //If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. dir = "desc"; switching = true; } } } }