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

Question

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

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

例如:

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

每个 >= "5"的单元格都有绿色背景色。

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

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 Fiddle demo .

或者，使用 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 Fiddle demo .

引用资料:

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