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:

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

CSS:

table td {
    padding: 5px 30px;
}

jQuery:

var cell = $('td');

cell.each(function() {
var cell_value = $(this).html();
if ((cell_value >= 0) && (cell_value <=2)) {
    $(this).css({'background' : '#FF0000'});   
} else if ((cell_value >= 3) && (cell_value <=7)) {
    $(this).css({'background' : '#0066CC'});
} else if (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:

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

Maybe it works