<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
How to sort rows in a table using JavaScript?
</
title
>
<
style
>
body {
text-align: center;
}
table,
th,
tr td {
border: 1px solid black;
}
th,
td {
padding: 3px 20px;
}
table {
margin: auto;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h3
>
Click on header to sort in
ascending and descending
</
h3
>
<
table
id
=
"table"
>
<
tr
>
<
th
onclick
=
"sortTable(0)"
>Country</
th
>
<
th
onclick
=
"sortTable(1)"
>Capital</
th
>
</
tr
>
<
tr
>
<
td
>United states of America</
td
>
<
td
>Washington DC</
td
>
</
tr
>
<
tr
>
<
td
>India</
td
>
<
td
>New Delhi</
td
>
</
tr
>
<
tr
>
<
td
>Australia</
td
>
<
td
>Canberra</
td
>
</
tr
>
<
tr
>
<
td
>Germany</
td
>
<
td
>Berlin</
td
>
</
tr
>
</
table
>
<
script
>
// JavaScript program to illustrate
// Table sort for both columns and
// both directions
function sortTable(n) {
let table;
table = document.getElementById("table");
var rows, i, x, y, count = 0;
var switching = true;
// Order is set as ascending
var direction = "ascending";
// Run loop until no switching is needed
while (switching) {
switching = false;
var rows = table.rows;
//Loop to go through all rows
for (i = 1; i < (rows.length - 1); i++) {
var Switch = false;
// Fetch 2 elements that need to be compared
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
// Check the direction of order
if (direction == "ascending") {
// Check if 2 rows need to be switched
if (x.innerHTML.toLowerCase() >
y.innerHTML.toLowerCase()) {
// If yes, mark Switch as needed
// and break loop
Switch = true;
break;
}
} else if (direction == "descending") {
// Check direction
if (x.innerHTML.toLowerCase() <
y.innerHTML.toLowerCase
()) {
// If yes, mark Switch as needed
// and break loop
Switch
=
true
;
break;
}
}
}
if (Switch) {
// Function to switch rows and mark
// switch as completed
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching
=
true
;
// Increase count for each switch
count++;
} else {
// Run while loop again for descending order
if (count == 0 && direction == "ascending") {
direction
=
"descending"
;
switching
=
true
;
}
}
}
}
</script>
</
body
>
</
html
>