Why does the background color not change?

Question

I had a problem highlighting some rows in a table generated by a vertex.

With dynamic actions and jQuery, I was able to highlight individual 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 now red.

But I want to highlight the entire line, so I thought that let 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"> 

The line did not change their background color, and I have no idea why. Tested with Firefox and Chrome.

I am grateful for any tips or solutions.

Mario

Answer 1

Setting the background for <tr> does not always work reliably; you better set it for the entire child element of <td> or <th> s.

A good way to do this is to replace

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

with

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

then add css

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

which will make all the table data items under this row table red.

Answer 2

Try using this JS code ( jsFiddle ). Worked for me

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

Answer 3

You can also use .closest('tr') and I used text instead of html

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

Demo .