×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

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

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

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

(OP)
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 ?




CODE --> html

<!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> 

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

Hi

As I believe that You might not need jQuery, here is a plain JavaScript solution :

CODE --> JavaScript ( ES6 )

function color_row(table)
{
    for (var row of table.rows)
        if (new Set(value_list = Array.from(row.cells).filter(cell => cell.tagName == 'TD').map(cell => cell.textContent)).size > 1)
            row.style.backgroundColor = 'red'
} 

You call it by passing a reference to the table node to decorate, for example with your HTML I tested it like this :

CODE --> JavaScript

window.addEventListener('load', () => color_row(document.getElementsByTagName('table')[0])) 


Feherke.
feherke.github.io

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close