使用下拉菜单使用JavaScript更改表格单元格的颜色

Question

I'd like to use some javascript code to change the background color of a single cell within a table.

I have some code below which allows me to change the page background color. This is similar in concept to what I would like to do, but I would really like to be able to change just one cell...not the whole page.

I have thought about making the rest of the cell borders and background colors white, leaving the cell I want to manipulate transparent, but I think this probably a brute force method that will cause me trouble down the road.

Does anyone have any advice to do this with javascript?

The page background color changing code is here:

<form name="bgcolorForm">Try it now: 
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">set background color    
<option value="FFFFCC">light yellow
<option value="CCFFFF">light blue
<option value="CCFFCC">light green
<option value="CCCCCC">gray
<option value="FFFFFF">white
</select></form>

Answer 1

Are you looking for something like this? http://jsfiddle.net/2KdmA/ But if you are going to manipulate heavily I suggest using jQuery.

Answer 2

just use: document.getElementById('theID').style.backgroundColor ="#" + value on the cell.

Are you using jQuery? Or it has to be pure JS?

with jQuery you can use $(selector).css("background-color", value);

Answer 3

If it is only one single cell (not repeated) you can give it a specific ID and then target that in your onchange event.

For example, if your td id = "mycell"

then call a function updateColor on change of the select

<select onChange="updateColor(this.options[this.selectedIndex].value);">

and here is the function

function updateColor(color){
    var myCell = document.getElementById('mycell');     
        myCell.style.background = "#"+color;

}

See the updated fiddle

Answer 4

If you want to access by cell coordinates, you can do something like

function cellColour(tableId, row, column, col){
    var t = document.getElementById(tableId);
    if(!t) throw '#'+tableId+' does not exist.';
    if(t.rows.length <= row)  throw 'Row '+row+' of #'+tableId+' does not exist.';
    t = t.rows[row];
    if(t.cells.length <= column)  throw 'Column '+column+' of row '+row+' of #'+tableId+' does not exist.';
    t = t.cells[column];
    t.style.backgroundColor = col;
}