如果列的值相同，如何更改表格行的背景颜色？

Question

I want to set same and different background color of Table rows where the column value matches previous or next row of same for same column.

For example, Check the below table.

<table class="table table-striped">
<thead class="table-light fw-semibold">
    <tr class="align-middle">
        <th>Name</th>
        <th>Age</th>
        <th>Profession</th>
    </tr>
</thead>
<tbody>
    <tr class="align-middle">
        <td>
            John
        </td>
        <td>
            25
        </td>
        <td>
            Architect
        </td>
    </tr>
    <tr class="align-middle">
        <td>
            John
        </td>
        <td>
            35
        </td>
        <td>
            Teacher
        </td>
    </tr>
    <tr class="align-middle">
        <td>
            Jerry
        </td>
        <td>
            30
        </td>
        <td>
            Broker
        </td>
    </tr>
</tbody>

In the above table. The name column of the first row matches name of 2nd(next) row. So I want to set a different background color for both the matched rows.

How can I do that using JS/jQuery?

Answer 1

You may want to iterate the rows. I wasn't sure which columns you wanted to compare with the previous row, so I compared all columns and if any match, I mark those rows with a background.

 var previous_values = new Array(100) var previous_row = null; document.querySelectorAll("tbody tr").forEach(function(row) { var i = 0; var found = false; row.querySelectorAll("td").forEach(function(td) { var value = td.innerText; if (value == previous_values[i]) { found = true; } previous_values[i] = value; i++; }) if (found) { row.classList.add("bg-primary"); if (previous_row) { previous_row.classList.add("bg-primary"); } } previous_row = row; })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <table class="table table-striped"> <thead class="table-light fw-semibold"> <tr class="align-middle"> <th>Name</th> <th>Age</th> <th>Profession</th> </tr> </thead> <tbody> <tr class="align-middle"> <td> John </td> <td> 25 </td> <td> Architect </td> </tr> <tr class="align-middle"> <td> John </td> <td> 35 </td> <td> Teacher </td> </tr> <tr class="align-middle"> <td> Jerry </td> <td> 30 </td> <td> Broker </td> </tr> </tbody>