查找TR内的所有TD元素并使用jquery应用背景颜色
查找TR内的所有TD元素并使用jquery应用背景颜色
提问于 2020-05-26 17:05:17
我想应用背景颜色到所有td元素内TR标签的基础上div标题为下面的结构
<TR>
<TD Class="ABC">
<div class="grid-content-cell-wrapper" title="Total US-MultiOutlet"><span style="display: inline-block;
color: rgb(204, 204, 204);" class="runtime-list-item-wrap">Total US-MultiOutlet</span></div>
</TD>
<TD Class="ABC">
<div class="grid-content-cell-wrapper" title=""><span style="display: inline-block; color: rgb(204,
204,
204);" class="runtime-list-item-wrap"></span></div>
</td>
</TR>
<TR>
</TR>我试着使用下面的代码-
$("div[title='Total US-MultiOutlet']").closest('tr>td').css("background-color", "#FFA76C !important;");
$("div[title='Total US-MultiOutlet']").closest('tr td').css("background-color", "#FFA76C !important;");使用上面的jquery，它只将背景颜色应用于第一个TD，而不是第二个TD
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-26 18:29:56
$("div[title='Total US-MultiOutlet']").closest('tr').find("td").css("background-color", "#FFA76C");它正在将背景颜色应用于树中存在的所有TR
Stack Overflow用户
发布于 2020-05-26 17:22:34
你不需要jquery甚至javascript就可以做到这一点。您可以使用attribute selector直接使用CSS来实现这一点，其中与目标匹配的元素将被样式化。-在这种情况下，具有title属性且内容为"Total US-MultiOutlet“的文件。
然而，我要指出的是，尽管这种方法有效，但它非常脆弱，如果title属性内容发生变化，它将失败。最好是找到一种更健壮的方法来选择所需的目标，并添加一个可以适当设置样式的类。
table {
border-collapse: collapse;
border: solid 1px #6e6e6e;
}
td {
border: solid 1px #6e6e6e;
padding: 0;
}
.grid-content-cell-wrapper {
padding: 10px 16px;
}
span {
display: inline-block;
color: rgb(204, 204, 204);
}
.grid-content-cell-wrapper[title="Total US-MultiOutlet"] {
background: #FFA76C;
}
.grid-content-cell-wrapper[title="Total US-MultiOutlet"] span{
color: black;
}<table>
<tr>
<td Class="ABC">
<div class="grid-content-cell-wrapper"
title="Total US-MultiOutlet">
<span class="runtime-list-item-wrap">Total US-MultiOutlet</span>
</div>
</td>
<td Class="ABC">
<div class="grid-content-cell-wrapper" title="">
<span class="runtime-list-item-wrap">Other content</span>
</div>
</td>
</tr>
<tr>
<td Class="ABC">
<div class="grid-content-cell-wrapper"
title="Total US-MultiOutlet">
<span class="runtime-list-item-wrap">$100000</span>
</div>
</td>
<td Class="ABC">
<div class="grid-content-cell-wrapper" title="">
<span class="runtime-list-item-wrap">Other content</span>
</div>
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62018412
复制相关文章
相似问题
腾讯云开发者
