Найдите все элементы TD внутри TR и примените цвет фона, используя jquery - PullRequest
Новая
       6

Найдите все элементы TD внутри TR и примените цвет фона, используя jquery

0 голосов
/ 26 мая 2020

Я хочу применить цвет фона ко всем элементам 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 цвет фона применяется только для 1-го TD, а не для 2-го TD

Ответы [ 2 ]

0 голосов
/ 26 мая 2020 
$("div[title='Total US-MultiOutlet']").closest('tr').find("td").css("background-color", "#FFA76C");

Применяет цвет фона ко всем TD, присутствующим внутри TR

0 голосов
/ 26 мая 2020

Для этого не требуется jquery или даже javascript. вы можете сделать это с помощью прямого CSS, используя attribute selector, в котором элементы, соответствующие цели, будут стилизованы. - в данном случае те, у которых есть атрибут title, который имеет содержимое «Total US-MultiOutlet».

Я бы хотел отметить, что, хотя этот подход работает - он ОЧЕНЬ fr agile и не сработает, если заголовок изменение содержимого атрибута. Вам будет лучше найти более надежный способ выбора желаемых целей и добавления класса, которому можно будет придать соответствующий стиль. 

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>
...