根據值更改表格的背景單元格

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。

Answer 2

不要肯定css.I'll直接跳轉到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'）;