How to change 'text-decoration' property with jQuery?

Question

I have table with following structure:

<table style=" margin-top: 10px; border: 1px wheat solid; width: 100%; font-size: 10px; font-family: Arial , Verdana;text-shadow:0px 1px 0px #000">
    <tr class="infoRow" style="background:#666666; ">
        <td>Element11 </td>
        <td style="font-size:12px; font-weight:bold; font-family: georgia;">Element12 </td>
        <td><input type="checkbox" class="check" /></td>
    </tr>  
    <tr class="infoRow" style="background:#666666; ">
        <td>Element21 </td>
        <td style="font-size:12px; font-weight:bold; font-family: georgia;">Element22 </td>
        <td><input type="checkbox" class="check" /></td>
    </tr>           
</table>

I want, after check <input class="check" ... /> the value of the property text-decoration to make 'underline' on the following row.

$('.check').click(function(){
   $('infoRow').css("text-decoration", "underline");   
});

This code change all rows.

Thanks in advance.

Killarney

Answer 1

...to make 'underline' on the following row.

(My emphasis).

To underline it on the following row, you'd want to go up to the checkbox's parent row, then to its sibling row, then apply css to that:

$(this).closest('tr').next('tr').css('text-decoration', 'underline');

Separately, you probably want to test whether the checkbox is being checked or unchecked, e.g.:

$('.check').click(function(){
    $(this).closest('tr').next('tr').css(
        'text-decoration',
        this.checked ? 'underline' : 'none'
    );
});  

Live example

Astto

Nice answer. My 2 cents - it is a better practice to add a class (and style it accordingly in the stylesheet) to the effected element instead of changing the style directly using the .css() method. – Isothermal