Question

我在下面的html表中有多个 td 元素。我现在坚持这个问题。如果任何一个 td 元素的背景颜色为红色，则该完整行应以红色突出显示，这意味着该行中的其他 td 元素应突出显示。< / p>

以下是示例html。

<table border="1" class="CSSTableGenerator">

<style>
.foo {
    background-color: green;
}

.foo2 {
    background-color: red;
}
</style>

<tr>
    <th>Component</th>
    <th>Properties</th>
    <th>J02</th>
    <th>W02</th>
</tr>

<td>OccoR1CutoverConfiguration</td>
    <td>reservationCutoverSwitch</td>
    <td class="trueValue foo">false</td>
    <td class="trueValue foo">false</td>
    <tr />
<tr />

<td>IntegrationConfiguration</td>
    <td>exactTargetAppKey</td>
    <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
    <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
    <tr />
<tr />
</table>

以上代码仅突出显示红色的 SGEwbW94OkMwH7g0f4tSN5MAC504gSSG 的 td 元素。有没有办法可以使用jquery突出显示从 IntegrationConfiguration 到 SGEwbW94OkMwH7g0f4tSN5MAC504gSSG 的完整行？

Answer 1

首先你检查你的桌子有相同的problam修复那些，Problam是你做的一些并没有开始一些tr但是你结束tr。然后尝试这个它将在这个tr中添加类如何使用类foo

$('td').hasClass('foo').(this).closest('td').addClass('foo');

Answer 2

工作代码是以下小提琴 https://jsfiddle.net/sesn/c8dh6vy8/ 这是jquery代码

$(function(){
$('td').each(function(){
if($(this).css('background-color') == 'rgb(255, 0, 0)') 
{
$('td',$(this).parent()).css({'background-color':'red'});
}
});
});

Answer 3

根据tr个hasClass元素过滤td个元素。

$('tr').filter(function() {
  return $(this).find('td').hasClass('foo2');
}).addClass('foo2')

.foo {
  background-color: green;
}
.foo2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator">
  <tr>
    <th>Component</th>
    <th>Properties</th>
    <th>J02</th>
    <th>W02</th>
  </tr>

  <td>OccoR1CutoverConfiguration</td>
  <td>reservationCutoverSwitch</td>
  <td class="trueValue foo">false</td>
  <td class="trueValue foo">false</td>
  <tr />
  <tr />

  <td>IntegrationConfiguration</td>
  <td>exactTargetAppKey</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <tr />
  <tr />
</table>

Fiddle Demo

Answer 4

我理解你的问题：
如果任何td hasclass foo ... AddClass foo

见Fiddle here。请注意，我对您的<tr>和</tr>代码进行了更正。

$(document).ready(function(){
    $(".foo").siblings().addClass("foo");
    $(".foo2").siblings().addClass("foo2");
});

修改

如果可能是同一行中有trueValue和falseValue的情况......
这样做：

$(document).ready(function(){ $(".foo").siblings().addClass("foo"); $(".foo2").siblings().addClass("foo2").removeClass("foo"); });

Answer 5

首先找到包含foo2类的元素，然后从那些<td>元素导航到祖先<tr>：

$('td.foo2').closest('tr').addClass('foo2');

$('td.foo2').closest('tr').addClass('foo2');

.foo {
  background-color: green;
}
.foo2,
.foo2 td {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator">
  <tr>
    <th>Component</th>
    <th>Properties</th>
    <th>J02</th>
    <th>W02</th>
  </tr>

  <td>OccoR1CutoverConfiguration</td>
  <td>reservationCutoverSwitch</td>
  <td class="trueValue foo">false</td>
  <td class="trueValue foo">false</td>
  <tr />
  <tr />

  <td>IntegrationConfiguration</td>
  <td>exactTargetAppKey</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
  <tr />
  <tr />
</table>

如何使用jquery基于其他td元素更改td元素的背景颜色

5 个答案:

Fiddle Demo