找到TR内的所有TD元素，并使用jquery应用背景色

Question

我想根据以下结构的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;");

Answer 1

您不需要jquery甚至是javascript就能做到这一点。您可以使用attribute selector对普通CSS进行此操作，在其中将对与目标匹配的元素进行样式设置。 -在这种情况下，其标题属性的内容为“ 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>