Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to sort an HTML table using JavaScript?
To sort an HTML table using JavaScript, the code is as follows −
JavaScript function to sort an HTML Table
Consider the following sort function using JavaScript, that will be used to sort an HTML table.
function sortTable() {
var filterTable, rows, sorted, i, x, y, sortFlag;
filterTable = document.querySelector(".filterTable");
sorted = true;
while (sorted) {
sorted = false;
rows = filterTable.rows;
for (i = 1; i < rows.length - 1; i++) {
sortFlag = false;
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
sortFlag = true;
break;
}
}
if (sortFlag) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
sorted = true;
}
}
}
Example
In this example, we are writing HTML and JS code to sort an HTML table.
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
button {
padding: 10px;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
border-top: 1px solid black;
text-align: left;
padding: 16px;
}
</style>
</head>
<body>
<h1>Sorting table example</h1>
<button onclick="sortTable()">Sort</button>
<table class="filterTable">
<tr>
<th>Name</th>
<th>BirthDay Month</th>
</tr>
<tr>
<td>Ron</td>
<td>January</td>
</tr>
<tr>
<td>Shawn</td>
<td>April</td>
<tr>
<tr>
<td>Caleb</td>
<td>December</td>
</tr>
<tr>
<td>Bruno</td>
<td>February</td>
</tr>
<tr>
<td>Jack</td>
<td>October</td>
</tr>
<tr>
<td>Max</td>
<td>November</td>
</tr>
</table>
<script>
function sortTable() {
var filterTable, rows, sorted, i, x, y, sortFlag;
filterTable = document.querySelector(".filterTable");
sorted = true;
while (sorted) {
sorted = false;
rows = filterTable.rows;
for (i = 1; i < rows.length - 1; i++) {
sortFlag = false;
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
sortFlag = true;
break;
}
}
if (sortFlag) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
sorted = true;
}
}
}
</script>
</body>
</html>Output
The above code will produce the following output −
On clicking the Sort button −
Updated on: 09-Nov-2023
1K+ Views
Advertisements