Post
Ask Question

Swap Rows with Columns in HTML Table with JavaScript

Swap Rows & Columns with JavaScript

In this tutorial, I will teach how you can easily Swap Rows with Columns of an HTML table with JavaScript.

Create an HTML table

First of all, create an HTML table.

<table>
    <tbody>
        <tr>
            <td class="header">Heading 1</td>
            <td class="header">Heading 2</td>
            <td class="header">Heading 3</td>
        </tr>
        <tr>
            <td>Heading A</td>
            <td>content for 1 and A</td>
            <td>content for 2 and A</td>
        </tr>
        <tr>
            <td>Heading B</td>
            <td>content for 1 and B</td>
            <td>content for 2 and B</td>
        </tr>
        <tr>
            <td>Heading C</td>
            <td>content for 1 and C</td>
            <td>content for 2 and C</td>
        </tr>
    </tbody>
</table>

Notice that I gave all the ‘td’ elements of the first ‘tr’ a CSS class called ‘heading’. I will be using the CSS class to provide a green color background to the elements. You can make this table dynamic by fetching data from the database with Dapper or other ORMs and showing the records inside the table.

Add CSS to the page

Next, add the CSS to the page.

table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    color: #FFF;
}

    table td, table th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    table tr {
        background-color: #2549f6;
    }

    table .header {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }

Notice the last CSS – ‘table .heading’ provides green background color – ‘background-color: #4CAF50’.

JavaScript Code to swap rows with columns

The JavaScript Code to swap rows with columns in HTML Table

First add a button, to your web page, which on clicking will do the swapping.

<button onclick="Swap()">Click</button>

Next, add the JavaScript code.

<script>
    function Swap() {
        var t = document.getElementsByTagName('tbody')[0],
            r = t.getElementsByTagName('tr'),
            cols = r.length, rows = r[0].getElementsByTagName('td').length,
            cell, next, tem, i = 0, tbod = document.createElement('tbody');

        while (i < rows) {
            cell = 0;
            tem = document.createElement('tr');
            while (cell < cols) {
                next = r[cell++].getElementsByTagName('td')[0];
                tem.appendChild(next);
            }
            tbod.appendChild(tem);
            ++i;
        }
        t.parentNode.replaceChild(tbod, t);
    }
</script>

In the JavaScript code, I am looping through all the ‘tr’ and ‘td; elements of the ‘table’ and then swapping them.

Testing

Run your web page on your browser and you will see the ‘HTML’ table shown in the below image.

HTML Table

Next, click the ‘button’ to do the swapping. Now the table will look like this.

Button for swapping

Hope you enjoyed learning this technique. Share your views in the comments below. Also, see my other similar tutorials on C-Sharpcorner: