根据值改变表格的背景单元格
根据值改变表格的背景单元格
提问于 2011-12-29 18:15:55
我的站点读取一个包含数据表信息(值)的XML文件。我使用CSS来设置表格的样式，一切都很正常。
为了获得更好的用户体验，我想知道是否可以根据单元格的值动态更改每个单元格的背景颜色？
例如：
每个包含小于"5“的数字的单元格都有红色的背景颜色；
每个单元格>= "5“都有绿色的背景色。
我的第一个解决方案是使用Javascript --但我想知道是否有办法只使用CSS样式来解决这个问题？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-12-29 18:39:17
只使用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。
参考文献：
Stack Overflow用户
发布于 2011-12-29 18:30:29
我不确定to。我将直接跳到jquery
$('#mytable tr td').each(function(){
if($(this).text() > 5)$(this).css('background-color','red');
});Stack Overflow用户
发布于 2015-06-10 12:29:00
没有循环，你可以这样做
var val="ff"；
$("#grid td:contains('"+val+"')").css('background-color'，'red')；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8666500
复制相关文章
相似问题
腾讯云开发者
