change between 3 different background color based on cell value

Question

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) more than 20: confirmed (still open for registrants) 60: full (closed for registrants)

I'm hoping to use javascript (or just css if possible) to change the background-color of a table cell based on the value pulled from the registrants-table. I have found several similar questions asked here, but so far only with two values: like this one .

I have cloned latest live example at jsfiddle dot net and tried to make it work, but have messed it up so that it does not work... I'm not even sure what the best way to incorporate it into the component in question once it does work ('',) Hoping there are someone that can point me in the right direction?

unable to post link /DaBouncer/DL6U2/185/]

Answer 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