I’m stuck with a challenge to change the background color of td elements based on the th class. Below is the html code, which has th class called bots, I’ve to change the background color of all the td elements below the bots class.
<table border="1" class="CSSTableGenerator" id="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="bots">J10</th>
<th>J11</th>
<th>J12</th>
<th>J13</th>
</tr>
<tr>
<td>GenerateAlternateTagUrlDroplet</td>
<td>alternateTagConfiguration</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
</tr>
<tr>
<td>AlternateTagUrlDroplet</td>
<td>tagConfiguration</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
</tr>
</table>
Can someone please help me with jquery code to achieve this?
Many Thanks in advance.
3
Answers
You can use
map()
to return array of indexes with.bots
class and then change css oftd
with same index.One option would be to do something along the lines of:
Codepen
Maybe get all th.bots index and use that to color the tds.
Assuming you have jQuery:
Edit: Excluding other tables on same page
http://codepen.io/anon/pen/PzNZrE