Question

我想使用jquery根据文本内容更改单元格的背景颜色。

示例：

对于“Exceeds”td中的第二行，我想将背景颜色更改为绿色，因为它的文本超出了......

<table>    
<tr><td>Jedi Armor1</td><td>Needs</td></tr>
<tr><td>Jedi Armor2</td><td>Exceeds</td></tr>    
</table>

Answer 1

我假设你想改变细胞的颜色，只改变细胞的颜色。如果要根据文本更改颜色，请使用contains() jQuery选择器：

CSS：

.greenBg {
    background: green;
}

jQuery：

$("td:contains('Exceeds')").addClass('greenBg');

<强> jsFiddle Demo

修改：

如果您想将此限制仅限于第二列，则更适合：

$("td:nth-child(2):contains('Exceeds')").addClass('greenBg');

如果有人想要更改整列的颜色：

$("td:nth-child(2):contains('Exceeds')").closest('table').find('td:nth-child(2)').addClass('greenBg');

<强> jsFiddle Demo

Answer 2

更新以下问题澄清：

Demo Fiddle

要根据另一个单元格的值更改一个单元格的背景颜色，可以使用例如：

$('table tr td:nth-child(4)').each(function () {
    $(this).text() == 'Exceeds' && $(this).parent().find('td:nth-child(2)').css('background-color', 'green');
});

更改特定列的背景：

$('table tr td:nth-child(2)').css('background-color', 'red');

但是你应该尝试使用CSS来保持样式的分离，在这种情况下你可以用以下方法来完成：

table tr td:nth-child(2){
  /* styles*/
}

或者......如果您特别需要动态控制，而不是直接在jQuery中分配样式，请添加一个类：

$('table tr td:nth-child(2)').addClass('rowBackground');

然后在你的CSS中：

.rowBackground{
  background-color:red;
}

Answer 3

您可以使用.eq()或:eq()选择器：

$('table tr td:eq(3)').css('background-color','green');

如果要更改颜色的.last()始终是最后一个td，请

或使用td：

$('table tr td').last().css('background-color','green')

Answer 4

Native JS：

var td = document.getElementsByTagName("td");
var i = 0, tds = td.length;
for (i; i < tds; i++) {
    if (td[i].innerHTML == "Exceeds") {
        td[i].setAttribute("style", "background:green;");
    }
}

这是一个显示的jsfiddle：http://jsfiddle.net/vHvLh/

如何使用jquery更改表格单元格背景颜色

4 个答案:

Demo Fiddle