JavaScript - How to Sort Rows in a Table?

Last Updated : 26 Nov, 2024

Rows in a table are horizontal sections that hold data, organizing information across columns in a structured, easy-to-read format. To sort table rows in JavaScript, create a function that compares rows based on cell values. Use a loop to check and swap rows as needed until all rows are in order.

Approach to Sort Rows an a Table

When the "Sort" button is clicked, the JavaScript sortTable() function starts, organizing the rows alphabetically based on the country names.
The function compares each row's country name and swaps rows if needed, repeating until the table is fully sorted alphabetically.

Example 1: This example sorts the table using a while loop to switch the rows until the rows are sorted.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            text-align: center;
        }

        table,
        th,
        tr td {
            border: 1px solid black;
        }

        th,
        td {
            padding: 3px 20px;
        }

        table {
            margin: auto;
        }
    </style>
</head>

<body>
    <table id="table">
        <tr>
            <th>Country</th>
            <th>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>
    <br>

    <button onclick="sortTable()">
        Sort
    </button>

    <script>

        // JavaScript Program to illustrate
        // Table sort on a button click
        function sortTable() {
            let table, i, x, y;
            table = document.getElementById("table");
            let switching = true;

            // Run loop until no switching is needed
            while (switching) {
                switching = false;
                let 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")[0];
                    y = rows[i + 1].getElementsByTagName("TD")[0];

                    // 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;
                    }
                }
                if (Switch) {
                    // Function to switch rows and mark switch as completed
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                }
            }
        }
    </script>
</body>

</html>

Output

Example 2: This example sorts the table using the same loop technique but executes the function for both the given columns, as well as in both directions (ascending and descending).