如何用jQuery更改'text-decoration'属性？

Question

我有以下结构的表:

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

我想在检查<input class="check" ... />属性文本修饰的值后,在下一行上设置'下划线'.

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

此代码更改所有行.

提前致谢.

Answer 1

... 在下一行上加"下划线" .

(我强调).

要在下一行中为它加下划线,您需要转到复选框的父行,然后转到其兄弟行,然后应用于css:

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

另外,您可能想要测试是否正在选中或取消选中复选框,例如:

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

实例