Changing td background color (specific cells)

I’m after some pointers on changing the background color of specific cells in a table (not rows or cells, but one or more specifig cells).

I have a dropdown, that upon selection will show some results, based on this

So far so good! I also have another non dynamically created table on the same page.

What i want to do is change the backgroud color of certain cells based on the result of the dropdown selection. Basically the static table is layed out like a floorplan, the color change will be to highlight your choice on the floorplan.

I’m really not sure of the best way to do this, my current thoughts are as follows…

Each cell in the table has a unique class
upon select, the results can include a reference to the applicable cell classes and the results are written to css somehow??
The page isn’t refreshed though so not sure how the changes would be picked up if written out to a css/php file…

any thoughts and pointers very much appreciated

Because the page isnt being refreshed you will need to use javascript

Thanks for the reply, is there a way of doing it without javascript? I’d ideally like to avoid using java on the whole to avoid compatibility issues with java not being enabled etc.

If the page was refreshed i could presumably keep the value from the drop down choice and carry it to the refreshed page?

If this was the case, would writing new values in a css file be the way to do this?

If you refreshed the page on selection you wouldnt need javascript.
So you would need to make the drop down a jump menu. So as they select the value it jumps to the URL.

On each cell you would place something like;
Where ‘1’ is the ID and your getting it from say index.php?cell=1
$class = array(
‘1’ => ‘highlight_red’,
‘2’ => ‘highlight_blue’,

if(isset($_GET['cell']) == $your_database_variable)
	echo '<td class="'.$class[$your_database_variable].'">'.$your_database_variable.'</td>';
	echo '<td>'.$your_database_variable.'</td>';


There is more than likely a smarter way to output the

cell. This will get you on the right track though

I believe this is what you are asking for. It does not use any javascript. Karma me if you like it.


Cell A Cell B Cell C

thanks both, i’ll have a play with that, i think benanamen has what i’m after.

Sponsor our Newsletter | Privacy Policy | Terms of Service