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

Answer 1

It may be possible to do this using CSS expressions, but this is non-standard and IIRC only works in Internet Explorer. So I'd advise against it.

Doing this server-side or using JavaScript are your best bets.

Answer 2

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.

Answer 3

Not to sure about css.I'll jump straight to jquery

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

Answer 4

without loop you can do it this way

var val="ff";

$("#grid td:contains('"+val+"')").css('background-color', 'red');