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.

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