JQUERY Выберите все ячейки td, которые находятся внутри tr с определенным стилем

Question

Как я могу изменить цвет ячеек td, которые находятся внутри tr с определенным стилем?

Например:

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

Это фильтр таким же образом, но включают в себя CSS набор во внешней таблице стилей (или в style тегов в head документа).

Я бы, однако, уменьшить DOM обход и явно работаю на только tr элементов, а также использовать данное имя-класса для достижения того же:

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

Который, конечно, позволяет CSS быть используется:

tr.hasDisplayTableRow td { 
    /* css */ 
} 

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

EDIT ответ Давида показывает, что это возможно. Хотя это умно, классный подход был бы более ремонтопригодным 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");