BvilleBullet BvilleBullet - 1 month ago 8
CSS Question

jquery highlight row based on column value

Hi I am hoping that somebody can help me to tweak this JQuery code so that it will highlight the entire data row rather than just the cell containing the value 'N'. I have tried to apply the code to the table row but it is still only highlighting the background color of the cell containing the value of 'N' where as I need to highlight the entire table row. Does anybody have any suggestions?

<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#table_id tr.y_n td').each(function(){
if ($(this).text() == 'N') {
$(this).css('background-color','#f00');
}
});
});

</script>

</head>
<body>
<table id="table_id">
<tr><th>Question</th><th>Y/N?</th></tr>
<tr><td>I am me.</td><td>Y</td></tr>
<tr class="y_n"><td>N</td><td>Y</td></tr>
<tr><td>I am not sure.</td><td class="y_n">Y</td></tr>
<tr><td>This is a table.</td><td class="y_n">Y</td></tr>
</table>

</body>
</html>

Answer Source

I believe parent() is what you want. Change the following line:

$(this).css('background-color','#f00');

to

$(this).parent().css('background-color','#f00')