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

Answer 1

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

$('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的{​​{1}}标记中）包含CSS集。

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

tr

当然，它允许使用CSS：

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

Answer 2

你不能为一个风格做那个，你需要一个班级：

<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

Answer 3

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

相反，为什么不将类添加到有问题的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">

Answer 4

为什么不通过CSS执行此操作？这是我在JQuery中的表现。

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