html sortable table with Javascript

Click the button to sort the table alphabetically, by name:

Sort

Codes 

<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>Country</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</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.rows;
/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>

Sources – 

https://www.w3schools.com/howto/howto_js_sort_table.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table