Article Categories

Selected Reading

How to sort an HTML table using JavaScript?

HTML Web Development Front End Technology Javascript

Sorting HTML tables using JavaScript allows for dynamic data organization without server requests. This technique uses DOM manipulation to reorder table rows based on cell content.

How Table Sorting Works

The sorting algorithm compares adjacent rows and swaps them if they're in the wrong order. This bubble sort approach continues until all rows are properly sorted alphabetically.

Basic Sorting Function

Here's the core function that implements bubble sort for table rows:

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;
        }
    }
}

Complete Example

This example demonstrates a sortable table with sample data:

<!DOCTYPE html>
<html>
<head>
<title>Sort HTML Table Alphabetically</title>
<style>
    button {
        padding: 10px;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #ddd;
        margin-top: 10px;
    }
    th, td {
        border: 1px solid #ddd;
        text-align: left;
        padding: 12px;
    }
    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>
</head>
<body>
<h1>Sorting Table Example</h1>
<button onclick="sortTable()">Sort by Name</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>

Enhanced Sorting with Column Selection

For more flexibility, here's an improved version that can sort by any column:

<!DOCTYPE html>
<html>
<head>
<title>Enhanced Table Sorting</title>
<style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
    th { background-color: #f2f2f2; cursor: pointer; }
    th:hover { background-color: #e2e2e2; }
    .sort-btn { margin: 5px; padding: 8px 12px; }
</style>
</head>
<body>
<h1>Multi-Column Sorting</h1>
<button class="sort-btn" onclick="sortTableByColumn(0)">Sort by Name</button>
<button class="sort-btn" onclick="sortTableByColumn(1)">Sort by Month</button>

<table id="sortableTable">
<tr>
<th>Name</th>
<th>Birthday Month</th>
</tr>
<tr>
<td>Ron</td>
<td>January</td>
</tr>
<tr>
<td>Alice</td>
<td>March</td>
</tr>
<tr>
<td>Bob</td>
<td>December</td>
</tr>
</table>

<script>
function sortTableByColumn(columnIndex) {
    const table = document.getElementById("sortableTable");
    let switching = true;
    let shouldSwitch = false;
    
    while (switching) {
        switching = false;
        const rows = table.rows;
        
        for (let i = 1; i < rows.length - 1; i++) {
            shouldSwitch = false;
            const x = rows[i].getElementsByTagName("TD")[columnIndex];
            const y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
            
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
            }
        }
        
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}
</script>
</body>
</html>

Key Points

Loop starts at index 1: Skips the header row (index 0)
Case-insensitive comparison: Uses toLowerCase() for consistent sorting
Bubble sort algorithm: Simple but effective for small to medium datasets
DOM manipulation: Uses insertBefore() to reorder rows

Conclusion

JavaScript table sorting provides an interactive way to organize data client-side. The bubble sort approach works well for smaller tables, while more complex datasets might benefit from optimized sorting algorithms.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next