根据值更改表格的背景单元格

Question

我的站点读取一个包含数据表信息（值）的 XML 文件。我使用 CSS 来设置表格的样式，一切正常。

为了获得更好的用户体验，我想知道是否可以根据每个单元格的值动态更改每个单元格的背景颜色？

例如：

每个包含小于“5”的数字的单元格都具有红色背景色；

每个单元格 >= “5” 的背景颜色为绿色。

我对此的第一个解决方案是使用 Javascript - 但我想知道是否有办法仅使用 CSS 样式来解决这个问题？

原文由 Stone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅 使用 CSS 是不可能的（尽管您可以使用 JavaScript 分配类以使其部分地使用 CSS 实现）。要使用纯 JavaScript，而不是库：

 var table = document.getElementById('tableID');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');

for (var i=0, len=cells.length; i<len; i++){
    if (parseInt(cells[i].innerHTML,10) > 5){
        cells[i].style.backgroundColor = 'red';
    }
    else if (parseInt(cells[i].innerHTML,10) < -5){
        cells[i].style.backgroundColor = 'green';
    }
}

JS 小提琴演示。

或者，使用 CSS 类：

 var table = document.getElementById('tableID');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');

for (var i=0, len=cells.length; i<len; i++){
    if (parseInt(cells[i].innerHTML,10) > 5){
        cells[i].className = 'red';
    }
    else if (parseInt(cells[i].innerHTML,10) < -5){
        cells[i].className = 'green';
    }
}

JS 小提琴演示。

参考：

• className 。
• getElementById() 。
• getElementsByTagName() 。
• innerHTML 。
• parseInt() 。
• style 。

原文由 David Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可以使用 CSS 表达式来做到这一点，但这是非标准的，IIRC 仅适用于 Internet Explorer。所以我建议不要这样做。

在服务器端执行此操作或使用 JavaScript 是您最好的选择。

原文由 Noah McIlraith 发布，翻译遵循 CC BY-SA 3.0 许可协议