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>

我无法修改HTML。我只能使用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类名为：orange，green等。

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/

为td值设置tr背景

4 个答案: