Wavesdream

How to compare any changed data of HTML table among different rows

Written by

Sanjay Bhowmick

in

In a HTML table compare every column data of every row. if any column data has changed value with respect to previous row then highlight that data.

We can achieve this using JavaScript. Here’s a basic example of how you could implement this functionality:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Changed Data</title>
<style>
    .changed {
        background-color: yellow;
    }
</style>
</head>
<body>

<table id="data-table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Initial Value 1</td>
            <td>Initial Value 2</td>
            <td>Initial Value 3</td>
        </tr>
        <tr>
            <td>Changed Value 1</td>
            <td>Changed Value 2</td>
            <td>Changed Value 3</td>
        </tr>
        <!-- Add more rows as needed -->
    </tbody>
</table>

<script>
    window.onload = function () {
        const table = document.getElementById('data-table');
        const rows = table.getElementsByTagName('tr');

        for (let i = rows.length - 1; i > 0; i--) {
            const currentRow = rows[i];
            const previousRow = rows[i - 1];

            if (!previousRow) {
                break; // Exit loop if no previous row (first row)
            }

            const currentCells = currentRow.getElementsByTagName('td');
            const previousCells = previousRow.getElementsByTagName('td');

            for (let j = 0; j < currentCells.length; j++) {
                const currentCell = currentCells[j];
                const previousCell = previousCells[j];

                if (currentCell.textContent !== previousCell.textContent) {
                    currentCell.classList.add('changed');
                }
            }
        }
    };
</script>

</body>
</html>

This code compares each cell of each row with the corresponding cell of the previous row. If the content of a cell is different from the content of the corresponding cell in the previous row, it adds a changed class to highlight the change. You can customise the appearance of the changed cells by modifying the CSS class .changed.

More posts