如何使用jQuery更改“文本装饰"属性? [英] How to change 'text-decoration' property with jQuery?

问题描述

我的桌子结构如下:

<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的值后在下一行添加下划线".

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");   
});

此代码更改所有行.

谢谢.

推荐答案

...在以下行上做下划线".

(我的重点).

要在以下行上加下划线，您需要转到复选框的父行，然后到其兄弟行，然后对该行应用css:

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

在线示例

这篇关于如何使用jQuery更改“文本装饰"属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！