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

小编典典

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

css

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

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

例如：

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

每个大于等于“ 5”的单元格具有绿色背景色。

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

阅读 304

2020-05-16

共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';
    }
}

或者，使用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';
    }
}

2020-05-16