查找 TR 内的所有 TD 元素并使用 jquery 应用背景颜色答案

【问题标题】：Find all TD element inside TR and apply background color using jquery查找 TR 内的所有 TD 元素并使用 jquery 应用背景颜色
【发布时间】：2020-05-26 18:29:56
【问题描述】：

我想根据下面结构的 div 标题将背景颜色应用于 TR 标签内的所有 td 元素

<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

【问题讨论】：

您的 选择器（如“在 TR 中查找所有 TD”）只要您有有效的 HTML（在您的代码中添加 <table>）就可以正常工作。正如你问了两个问题......第二个不起作用，因为它不喜欢你的 css 中的 !important - 删除它，添加 <table> 并且它工作正常 - 因此“选择器”（第一个问题）有效。
您的第一个问题（查找所有 TD） - 已解决（在您的 sn-p 中）作为错字 - 缺少 <table>
你的第二个问题（应用颜色）可以作为这个问题的副本来解决：stackoverflow.com/a/2655976/2181514

标签： jquery css css-selectors

【解决方案1】：

您不需要 jquery 甚至 javascript 来执行此操作。您可以使用 attribute selector 直接使用 CSS 来执行此操作，其中将设置与目标匹配的元素的样式。 - 在这种情况下，那些具有“Total US-MultiOutlet”内容的标题属性。

然而，我会注意到，虽然这种方法有效 - 它非常脆弱，如果标题属性内容发生变化，它将失败。您最好找到一种更可靠的方法来选择所需的目标并添加可以适当设置样式的类。

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>

【讨论】：

无权更改 CSS 或 HTML，所以我正在尝试使用 jquery 来应用 css

【解决方案2】：

$("div[title='Total US-MultiOutlet']").closest('tr').find("td").css("background-color", "#FFA76C");

它将背景颜色应用于 TR 中存在的所有 TD

【讨论】：