Zmiana komórki tła tabeli w zależności od wartości

Question

Moja witryna odczytuje plik XML zawierający informacje (wartości) dla tabeli danych. Używam CSS do stylu tabeli i wszystko działa dobrze.

Aby uzyskać lepsze wrażenia użytkownika, zastanawiałem się, czy możliwe jest dynamiczne zmienianie koloru tła każdej komórki w zależności od jej wartości?

Na przykład:

Każda komórka, która zawiera mniej niż liczba „5” ma czerwoną barwę tła;

każda komórka> = "5" ma zielony kolor tła.

Moim pierwszym rozwiązaniem jest użycie Javascript - ale chcę wiedzieć, czy istnieje sposób rozwiązania tego problemu tylko w stylach CSS?

Answer 1

Nie jest to możliwe z tylko CSS (chociaż można użyć JavaScript do przypisania klas, aby umożliwić jego częściowe zaimplementowanie za pomocą CSS). Aby użyć zwykłego kodu JavaScript, a nie biblioteki:

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.

Lub użyć klas 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.

Odniesienia:

• className.
• getElementById().
• getElementsByTagName().
• innerHTML.
• parseInt().
• style.

Answer 2

Nie pewny css.I'll wskoczyć prosto do jQuery

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

Answer 3

Możliwe jest to zrobić przy użyciu wyrażeń CSS, ale to nie jest norma i IIRC działa tylko w przeglądarce Internet Explorer. Więc odradzam to.

Robienie tego po stronie serwera lub przy użyciu JavaScript jest najlepszym wyborem.

Answer 4

bez pętli można zrobić to w ten sposób

var val = "ff";

$ ("# grid td: zawiera (" "+ val +" ")"). Css ("kolor tła", "czerwony");