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

dido picture dido · Jan 23, 2012 · Viewed 21.2k times · Source

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.

Answer

T.J. Crowder picture T.J. Crowder · Jan 23, 2012

...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