Question

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

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

例如：

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

每个单元＆gt; =“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

参考文献：

Answer 2

不确定css。我会直接跳到jquery

$('#mytable tr td').each(function(){
  if($(this).text() > 5)$(this).css('background-color','red');
});

Answer 3

可以使用CSS表达式执行此操作，但这是非标准的，IIRC仅适用于Internet Explorer。所以我建议不要这样做。

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

Answer 4

没有循环你可以这样做吗

var val =“ff”;

$（“＃grid td：contains（'”+ val +“'）”）。css（'background-color'，'red'）;

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

4 个答案: