Cambiar la celda de fondo de la tabla según el valor

Question

Mi sitio lee un archivo XML que contiene información (valores) para una tabla de datos. Uso CSS para darle estilo a la tabla y todo funciona bien.

Para obtener una mejor experiencia de usuario, me preguntaba si es posible cambiar dinámicamente el color de fondo de cada celda según su valor.

Por ejemplo:

Cada célula que contiene un número inferior a "5" tiene un color de fondo rojo;

cada celda> = "5" tiene un fondo de color verde.

Mi primera solución en esto es usar Javascript, pero quiero saber si hay una manera de resolver esto con estilos CSS solamente.

Answer 1

Esto no es posible con solo CSS (aunque puede usar JavaScript para asignar clases para permitir que se implemente parcialmente con CSS). Para utilizar JavaScript llanura, en lugar de una biblioteca:

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.

o, para usar clases 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.

Referencias:

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

Answer 2

Por no está seguro acerca de css.I'll saltar directamente a jQuery

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

Answer 3

Puede ser posible hacer esto usando expresiones CSS, pero esto no es estándar y IIRC sólo funciona en Internet Explorer. Entonces aconsejaría que no.

Hacer este lado del servidor o usar JavaScript son sus mejores apuestas.

Answer 4

sin bucle puede hacerlo de esta manera

var = val "ss";

$ ("# grid td: contains ('" + val + "')"). Css ('color de fondo', 'rojo');