CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
harshavmb
harshavmb

Reputation: 3872

how to change background-color of td elements based on other td elements using jquery

I've the below html table having multiple td elements. I'm stuck with this problem now. If any one of the td elements are having background color as red, that complete row should be highlighted in red, it means other td elments in that row should be highlighted.

Below is the sample html.

<table border="1" class="CSSTableGenerator">

<style>
.foo {
    background-color: green;
}

.foo2 {
    background-color: red;
}
</style>

<tr>
    <th>Component</th>
    <th>Properties</th>
    <th>J02</th>
    <th>W02</th>
</tr>

<td>OccoR1CutoverConfiguration</td>
    <td>reservationCutoverSwitch</td>
    <td class="trueValue foo">false</td>
    <td class="trueValue foo">false</td>
    <tr />
<tr />

<td>IntegrationConfiguration</td>
    <td>exactTargetAppKey</td>
    <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
    <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
    <tr />
<tr />
</table>

The above code highlights only td element holding SGEwbW94OkMwH7g0f4tSN5MAC504gSSG in red color. Is there a way we can highlight the complete row starting from IntegrationConfiguration to SGEwbW94OkMwH7g0f4tSN5MAC504gSSG using jquery?

Upvotes: 0

Views: 455

Answers (5)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I understand your question like this:
If any td hasclass foo... AddClass foo

See Fiddle here. Notice that I made corrections on your <tr> and </tr> tags.

$(document).ready(function(){
    $(".foo").siblings().addClass("foo");
    $(".foo2").siblings().addClass("foo2");
});

EDIT

If it is a possible case to have a trueValue AND falseValue in the same row...
Do this : 

$(document).ready(function(){
    $(".foo").siblings().addClass("foo");
    $(".foo2").siblings().addClass("foo2").removeClass("foo");
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

First find the elements with the foo2 class, then navigate from those <td> elements to the ancestor <tr>:

$('td.foo2').closest('tr').addClass('foo2');


$('td.foo2').closest('tr').addClass('foo2');
.foo {
  background-color: green;
}
.foo2,
.foo2 td {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator">
  <tr>
    <th>Component</th>
    <th>Properties</th>
    <th>J02</th>
    <th>W02</th>
  </tr>

  <td>OccoR1CutoverConfiguration</td>
  <td>reservationCutoverSwitch</td>
  <td class="trueValue foo">false</td>
  <td class="trueValue foo">false</td>
  <tr />
  <tr />

  <td>IntegrationConfiguration</td>
  <td>exactTargetAppKey</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <tr />
  <tr />
</table>

Upvotes: 1

Rayon
Rayon

Reputation: 36599

Filter tr elements based on hasClass over td elements.

$('tr').filter(function() {
  return $(this).find('td').hasClass('foo2');
}).addClass('foo2')
.foo {
  background-color: green;
}
.foo2 {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator">
  <tr>
    <th>Component</th>
    <th>Properties</th>
    <th>J02</th>
    <th>W02</th>
  </tr>

  <td>OccoR1CutoverConfiguration</td>
  <td>reservationCutoverSwitch</td>
  <td class="trueValue foo">false</td>
  <td class="trueValue foo">false</td>
  <tr />
  <tr />

  <td>IntegrationConfiguration</td>
  <td>exactTargetAppKey</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <tr />
  <tr />
</table>

Fiddle Demo

Upvotes: 1

SESN
SESN

Reputation: 1283

The working code is the following fiddle https://jsfiddle.net/sesn/c8dh6vy8/ Here is the jquery code 

$(function(){
$('td').each(function(){
if($(this).css('background-color') == 'rgb(255, 0, 0)') 
{
$('td',$(this).parent()).css({'background-color':'red'});
}
});
});

Upvotes: 1

Mamunur Rashid
Mamunur Rashid

Reputation: 742

first you check your table there have same problam fixed those , Problam is some you did't start some tr But you end tr . then try this it will Add class in this tr how have td with class foo

$('td').hasClass('foo').(this).closest('td').addClass('foo');

Upvotes: 2

Related Questions