How to make function give row that have different value with color red to full row?

JavaScript
1

problem

How to make row that have different value with color red font to full row ?

I have html dynamic table not static meaning i dont know how many rows or column inside

table because it changed based on data show from back end .

I need to give color red to row have distinct value

according to my case then second row and third row will be

have font red and first row will not be change color .

First row have similar value as 12 on all td so that color will not change .

But second row have distinct value or different value 15 so that will be red font to full row completely .

third row have distinct value or different value as 17,15,13,12 so that third row

completely will have red font .

meaning if I have one value or more different value from each other on same row

then full row or all td on tr will be change font to red .

Actually i need function jquery or javascript give row that have different value with

color red to full row ?

can you please help me on that ?
What I have tried:

<!DOCTYPE html>
<html>
<body>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
<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>
</table>

<button id="button">Click Me</button>
</body>
</html>
2

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);
3

thank you for reply
can you give me full code have jquery and html
im beginner to learn jquery

4

Done and done, in the previous post.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.