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" ... />后，将属性text-decoration的值设置为在下一行上加下划线。

$('.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'
    );
});

Live example

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

1 个答案: