设置 TD 值的 TR 背景

Question

<table id="tab" border=2>
    <tr> <td>1</td><td>a</td><td>red</td> </tr>
    <tr> <td>2</td><td>a</td><td>green</td> </tr>
    <tr> <td>3</td><td>a</td><td>orange</td> </tr>
    <tr> <td>4</td><td>a</td><td>green</td> </tr>
    <tr> <td>5</td><td>a</td><td>yellow</td> </tr>
    <tr> <td>6</td><td>a</td><td>blue</td> </tr>
</table>

我只能使用jQuery和CSS。 我想做：如果 td == 红色，则具有此 TD 的所有 TR 均为红色，如果 td == 绿色，则所有 TR 均为绿色。我该怎么做？

现场示例：http://jsfiddle.net/sjuKa/1/

Answer 1

$('#tab tr').each(function() {
    $(this).css({'background': $(this).children('td:last').text() });
});

示例：http://jsfiddle.net/simoncereska/sjuKa/3/

Answer 2

可以使用

.text()获取单元格的文本值，.parent()获取元素的父级。结合这些，您可以循环td标签，检查它们是否包含"红色"，如果是，请获取其.parent()并将其背景颜色设置为红色。

有关工作示例，请参阅 http://jsfiddle.net/sjuKa/2/:)

Answer 3

JS：

var tds = $('td');
tds.each(function() {
    $(this).parent().addClass( $(this).html().trim() );
})

.CSS

.red
{
    background-color: red;
}

JSFiddle

其余的都一样 - 这意味着命名为：橙色、绿色等的 CSS 类。

Answer 4

    $(document).ready(function(){
         $('table tr').each(function(){
         if($(this).children(':last').text() == 'red') {
            $(this).children('td').css('background-color', 'red');
         }
      })
   })

在这里摆弄 http://jsfiddle.net/sjuKa/1/