css - Changing background cell of table depending on value

Question

My site reads a XML file that contains information (values) for a data-table. I use CSS to style the table and everything works fine.

To get a better user-experience I wondered if it is possible to change the background color of each cell dynamically depending on its value?

For example:

Each cell that contains a number less then "5" has a red background color;

each cell >= "5" has a green background color.

My first solution on this is to use Javascript - but I want to know if there is a way to solve this with CSS-styles only?

Answer 1

This isn't possible with just CSS (though you can use JavaScript to assign classes to enable it to be partially implemented with CSS). To use plain JavaScript, rather than a library:

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.

Or, to use CSS classes:

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.

References:

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