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

问题描述：

我的站点读取包含数据表的信息（值）的XML文件。我使用CSS风格的表，一切工作正常。根据值更改表格的背景单元格

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

例如：

包含数每个小区小于“5”的具有红色的背景色;

每个单元> =“5”都具有绿色背景色。

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

你可以用CSS只用[属性选择器]（http://www.w3schools.com/cssref/sel_attribute_value.asp）。对于最小值和最大值之间的每个值，您只需要一个值。这将是一个非常大量的CSS。这是不实际的，但它是可能的。短而甜 - – mbomb007 2016-01-29 16:27:14

答

这是不可能的只是 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。

答

不要肯定css.I'll直接跳转到jQuery的

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

- 谢谢 – kneidels 2016-04-19 18:52:11

答

也许可以做到这一点使用CSS表达式，但这是非标准和IIRC只有在Internet Explorer中工作。所以我建议反对它。

做这个服务器端或使用JavaScript是你最好的选择。

答

无环你能做到这样

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

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

相关推荐