jQuery to highlight table row on radio select

Question

Hi All,

I have a table (standard markup) with a radio select in each row. Once the radio is selected I'd like to highlight that . Sounds straight forward enough but I can't get it to trigger.

Here's the markup:

The Table Row:

<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>
<label class="label_radio"><input type="radio" name="ame" value="val" /></label>
</td>
</tr>

This is the relevant part of the JS: (mods the label to sexify the radio button, that bit works, the bit doesn't):

$('.label_radio input:checked').each(function(){ 
$(this).parent('label').addClass('r_on');
$(this).parent('tr').addClass('.hilite'); //this line doesn't work
});

Any ideas? If I haven't given enough intel, please say and I'll get you what you need.

Greatly appreciated in advance :)

Answer 1

The radio's parent isn't actually the table row, it's the label. use the .closest method instead to look up the parent chain until you get to the TR.

$(this).closest('tr').addClass('hilite');

Answer 2

Not the cleanest way probably, but what if you use $(this).parent().parent().addClass('.hilite'); ?