Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

JavaScript

June 27, 2023

Change Table Columns Order

For example, there are four columns of the table:

Last name
First name
City
State

Here’s an example of how we can change the order of columns with the click of a button.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./script.js"></script>
</head>
<body>
    <table id="table">
        <tr>
            <th>Last name</th>
            <th>First name</th>
            <th>City</th>
            <th>State</th>
        </tr>
        <tr>
            <td>Sakhuja</td>
            <td>Nikita</td>
            <td>Delhi</td>
            <td>Delhi</td>
        </tr>
        <tr>
            <td>Sakhuja</td>
            <td>Nikita</td>
            <td>Delhi</td>
            <td>Delhi</td>
        </tr>
    </table>
    <button onclick="changeOrder()">Change Order</button>
</body>
</html>

Script.js

const changeOrder = () => {
    const table = document.getElementById("table");

    const rows = table.rows;
    
    for (let i = 0; i < rows.length; i++) {
        const cells = rows[i].cells;
    
        // Get the cell to move
        const cellToMove = cells[1];
    
        // Remove the cell from its current position
        rows[i].removeChild(cellToMove);
    
        // Insert the cell into the target position
        rows[i].insertBefore(cellToMove, cells[0]);
    }
}

So when we click on the change order button, it will move the cells of each row to the target position.