Question

I’ve got a problem to highlight some rows in a table generated by apex.

With dynamic actions and jQuery, I was able to highlight single columns

jQuery:

$('tr td[headers="IDZ"]').each(function(){
  if(parseInt($(this).html()) == 12){
    $(this).attr('style','background-color:red');
  }
});

Result in html:

<td align="right" headers="IDZ" style="background-color:red">12</td>

Works fine, the column where IDZ == 12 is red now.

But I want to highlight the entire row so I thought let’s get the parent node <tr> and add some “style”.

jQuery:

$('tr td[headers="IDZ"]').each(function(){
  if(parseInt($(this).html()) == 12){
    $(this).parent().attr('style','background-color:red');
  }
});

and the result:

<tr class="even" style="background-color:red">

Row didn’t change their background color and I have no idea why. Tested with Firefox and Chrome.

I’m grateful for any hints or solutions.

Mario

Answer 1

Setting a background for a <tr> doesn’t always work reliably, you are better to set it for all the child <td> or <th>s.

A good way to do this would be to replace your

$(this).parent().attr('style','background-color:red');

with

$(this).parent().addClass('highlightit');

then add css

tr.highlightit td { background-color: red; }

that will make all the table data elements under that table row have a red background.