Find all TD element inside TR and apply background color using jquery

Question

I want to apply background color to all td element inside TR tag based on div title for below structure

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

i am trying using below code-

$("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;");

Using above jquery it is applying background colour only to 1st TD not to 2nd TD

Your *selector* (as in "find all TD inside TR") works fine as long as you have valid HTML (add `` to your code). As you've asked 2 questions... the second doesn't work as it doesn't like `!important` in your css - remove that, add `
` and it works fine - ergo the "selector" (first question) is valid. — freedomn-m, May 26 '20 at 09:16
Your first question (find all TD) - is solved (in your snippet) as a typo - missing `` — freedomn-m, May 26 '20 at 09:17
Your second question (apply colour) can be solved as a duplicate of this question: https://stackoverflow.com/a/2655976/2181514 — freedomn-m, May 26 '20 at 09:18

gavgrif · Answer 1 · 2020-05-26T09:28:12.910

You do not need jquery or even javascript to do this. you can do this with straight CSS using the attribute selector in which elements that match the target will be styled. - in this case those with the title attribute that has the content of "Total US-MultiOutlet".

I would note however that although this approach works - it is VERY fragile and will fail if the title attribute content changes. You would be better served to find a more robust way of selecting the desired targets and adding a class that can be styled appropriately.

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>

do not have permission to change CSS or HTML, so i am trying using jquery to apply css — Bhushan, May 26 '20 at 09:32

score 0 · Accepted Answer · answered May 26 '20 at 10:29

0

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

It is applying background color to all TDs present inside TR

answered May 26 '20 at 10:29

Bhushan

73
1
9

Find all TD element inside TR and apply background color using jquery

2 Answers2