Use well-structured HTML
It’s easier to get things done in JavaScript when you’re dealing with good HTML code.
In this case, that means using THEAD and TBODY sections in the table, so that we can easily ignore the header row and get to work only with the value rows of the table.
<!DOCTYPE html>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<thead>
<tr bgcolor="#6699FF" width="100%">
<th>Part1</th>
<th>Part2</th>
<th>Part3</th>
<th>Part4</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>12</td>
<td>15</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td>17</td>
<td>15</td>
<td>13</td>
<td>12</td>
</tr>
</tbody>
</table>
<button id="button">Click Me</button>
Attach click event to button
It’s relatively straightforward to attach a click event to the button. The
function clickButtonHandler(evt) {
const tbody = document.querySelector("table tbody");
const rows = tbody.querySelectorAll("tr");
markRowsWithDifferentValue(rows);
}
const button = document.querySelector("#button");
button.addEventListener("click", clickButtonHandler);
The only mystery here is the markRowsWithDifferentValue function.
Color for the different rows
I’ve chosen to use pink to mark the different rows, as with a white background that’s easier to view.
tbody tr.differentValues {
background: pink;
}
Now we only need the markRowsWithDifferentValue function to add a class name of differentValues to each appropriate row.
Get cells in each row
To compare the cells, we first need to get the cells in each row.
function markRowsWithDifferentValue(rows) {
rows.forEach(function rowHasDifferentValue(row) {
const cells = Array.from(row.querySelectorAll("td"));
...
});
}
Find non-matching cells
Now that we have the cells, we can filter them for any that don’t match the first cell.
function markRowsWithDifferentValue(rows) {
rows.forEach(function rowHasDifferentValue(row) {
const cells = Array.from(row.querySelectorAll("td"));
const nonMatching = cells.filter(function cellsHaveDifferentValue(cell) {
return cells[0].innerText !== cell.innerText;
});
...
});
}
Update the non-matching rows
And lastly, if the nonMatching array contains anything, we should say that the row has differentValues
if (nonMatching.length > 0) {
row.classList.add("differentValues");
}
The final code
Along with the updated HTML and CSS code, the JS code to color rows with different values is:
function markRowsWithDifferentValue(rows) {
rows.forEach(function rowHasDifferentValue(row) {
const cells = Array.from(row.querySelectorAll("td"));
const nonMatching = cells.filter(function cellsHaveDifferentValue(cell) {
return cells[0].innerText !== cell.innerText;
});
if (nonMatching.length > 0) {
row.classList.add("differentValues");
}
});
}
function clickButtonHandler(evt) {
const tbody = document.querySelector("table tbody");
const rows = tbody.querySelectorAll("tr");
markRowsWithDifferentValue(rows);
}
const button = document.querySelector("#button");
button.addEventListener("click", clickButtonHandler);