如何使用 jquery 基于 th 更改 td 元素的背景颜色答案

【问题标题】：How to change background color of td elements based on th using jquery如何使用 jquery 基于 th 更改 td 元素的背景颜色
【发布时间】：2016-06-12 16:27:02
【问题描述】：

我遇到了一个挑战，即根据 th 类更改 td 元素的背景颜色。下面是 html 代码，其中有名为 bots 的 th 类，我必须更改 td 下面所有元素的背景颜色strong>机器人类。

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

有人可以帮助我使用 jquery 代码来实现这一点吗？

非常感谢。

【问题讨论】：

嗨，你能提供你当前的 CSS 吗？
感谢 Caelan 对此进行调查。好吧，我没有合适的CSS。我只是使用 jquery $('.trueValue').addClass('foo'); 动态添加类在我的 css 文件中，我正在设置这样的背景颜色 .foo {background-color: green;}。这仅适用于 td 元素。

标签： javascript jquery html css

【解决方案1】：

您可以使用map() 返回具有.bots 类的索引数组，然后更改具有相同索引的td 的css。

var bots = $('tr th.bots').map(function() {
  return $(this).index();
}).get()

$('tr:not(:first) td').each(function() {
  if (bots.indexOf($(this).index()) != -1) $(this).css('background', 'blue')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator" id="myTable">
  <tr>
    <th>Component</th>
    <th>Properties</th>
    <th class="bots">J10</th>
    <th>J11</th>
    <th class="bots">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>

【讨论】：

谢谢内纳德。为这个不清楚的问题道歉。我还有其他机器人课程。您的代码非常适合第一列。如果我的代码有多个类怎么办？如何根据班级名称更改颜色？例如，在这种情况下， bots 类。再次非常感谢您的回答。
太棒了，这是有效的，但它正在改变其他没有机器人类的表的背景？我们有没有机会阻止非机器人类的颜色改变？不好意思，这里问的太多了。感谢您的耐心。非常感谢
是的，最简单的选择是添加 id 这样的表 jsfiddle.net/Lg0wyt9u/980 或者您可以在要使用这些规则的表上添加特定的类。
太棒了，这完美！我不知道该怎么感谢你。但我只能说你是天才.. 非常感谢 Nenad。非常感谢。

【解决方案2】：

一种选择是按照以下方式做一些事情：

Codepen

var nthChild = $('.bots').index() + 1; // Add 1 since index starts at 0
$("td:nth-child(" + nthChild + ")").css("background", 'yellow');

【讨论】：

感谢@dwreck08 的回答。

【解决方案3】：

也许获取所有 th.bots 索引并使用它为 tds 着色。假设你有 jQuery：

$('th.bots').each(function(){
    $('td:nth-child('+($(this).index() + 1)+')').css('background-color', 'blue');
});

编辑：排除同一页面上的其他表格 http://codepen.io/anon/pen/PzNZrE

$('th.bots').each(function(){
    $(this).parents('table').children().find('td:nth-child('+($(this).index() + 1)+')').css('background-color', 'blue');
});

【讨论】：

根据您的要求更新答案