Change Between 3 Different Background Color Based On Cell Value

I have a booking page on my Joomla! 2.5 website where visitors can sign up for events; these events have 3 different statuses : less than 20: preliminary (open for registrants) mor

Solution 1:

If I understood correct you want the following:

HTML:

<tableborder="1"><tr><td>1</td><td>4</td><td>12</td></tr></table>

CSS:

tabletd {
    padding: 5px30px;
}

jQuery:

var cell = $('td');

cell.each(function() {
var cell_value = $(this).html();
if ((cell_value >= 0) && (cell_value <=2)) {
    $(this).css({'background' : '#FF0000'});   
} elseif ((cell_value >= 3) && (cell_value <=7)) {
    $(this).css({'background' : '#0066CC'});
} elseif (cell_value >= 8) {
    $(this).css({'background' : '#00CC66'});
}
});

Here is an example: http://jsfiddle.net/4Yp95/

EDIT

Try creating a script.js file (in a folder called 'js') with the jquery code in it and load it after jquery, right before the closing tab, in 'index.php' file:

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scriptsrc="js/script.js"></script>

Maybe it works