jquery - JQUERY选择具有特定样式的tr内的所有td单元格

Question

如何更改具有特定样式的 tr 内的 td 单元格的颜色？

例如：

<tr style="display: table-row">
<td></td>
<td></td>
</tr>

到目前为止我已经这样做了，但它不能完全工作：

if ($('.mydiv').css('display') == 'table-row') {
   $(this).siblings('td').css("background-color", "white");
}

score 5 · Accepted Answer

我的第一个想法，虽然未经测试，将是：

$('td').filter(function(){
    return this.parentNode.style.display == 'table-row';
}).css('background-color','#fff');

正如所写，这将选择所有td元素，然后将其过滤到其父元素tr具有style="display: table-row;"; 不过，这确实需要tr具有内联样式设置。然而，再多投入一点 jQuery，您可以通过以下方式实现相同的目标：

$('td').filter(function(){
    return $(this).parent().css('display') == 'table-row';
}).css('background-color','#fff');

这将以相同的方式过滤，但包括在外部样式表（或文档中的style标签）中设置的 CSS。head

但是，我会减少 DOM 遍历并tr仅显式处理元素，并使用给定的类名来实现相同的目的：

$('tr').filter(function(){
    return $(this).css('display') == 'table-row';
}).addClass('hasDisplayTableRow');

当然，这允许使用 CSS：

tr.hasDisplayTableRow td {
    /* css */
}

score 3 · Accepted Answer

你不能为风格做到这一点，你需要一个类：

<tr style="display: table-row" class="myrow">
    <td></td>
    <td></td>
</tr>

然后你可以在 css 中设置它的样式：

tr.myrow td{
    background-color: white
}

或者在 jQuery 中：

$("tr.myrow td").css({"background-color": "white"})

编辑大卫的回答表明这是可能的。虽然它很聪明，但类方法将更易于维护 IMO

score 0 · Accepted Answer

比较内联样式并不总是一个好主意。

相反，为什么不将类添加到有问题的 tr 中，这样它会更干净。

.table-row{
   display: table-row;
}

然后你可以使用这个

if ($('.mydiv').hasClass('table-row')) {
   $(this).siblings('td').css("background-color", "white");
}

而不是这个<tr style="display: table-row">

尝试更改您的标记

<tr class="table-row">

score 0 · Accepted Answer

你为什么不通过 CSS 做到这一点？这是我在 JQuery 中的做法。

$("tr[style='<your style value here>'] td").css("background-color", "white");

4 回答 4