Question

我遇到了根据 th 类改变 td 元素背景颜色的挑战。下面是html代码，其中包含类 bots ，我将更改以下所有 td 元素的背景颜色机器人类。

file_get_contents()

有人可以帮我用jquery代码来实现这个目的吗？

非常感谢提前。

Answer 1

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

＆＃13;

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')
})

＆＃13;

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

＆＃13;

Answer 2

一种选择是做一些事情：

Codepen

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

Answer 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');
});

如何使用jquery更改td元素的背景颜色

3 个答案: