2

我想使用一些 javascript 代码来更改表格中单个单元格的背景颜色。

我下面有一些代码可以让我更改页面背景颜色。这在概念上与我想做的类似，但我真的希望能够只更改一个单元格......而不是整个页面。

我曾想过将其余的单元格边框和背景颜色设为白色，让我想要操作的单元格透明，但我认为这可能是一种蛮力方法，会在路上给我带来麻烦。

有没有人有任何建议用 javascript 做到这一点？

页面背景颜色更改代码在这里：

<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>
4

4 回答 4

0

你在寻找这样的东西吗？http://jsfiddle.net/2KdmA/ 但是如果你要大量操作我建议使用 jQuery。

于 2012-08-28T03:24:08.420 回答
0

只需使用： document.getElementById('theID').style.backgroundColor ="#" + value在单元格上。

你在使用 jQuery 吗？还是必须是纯JS？

使用 jQuery，您可以使用$(selector).css("background-color", value);

于 2012-08-28T03:24:22.450 回答
0

如果它只有一个单元格（不重复），您可以给它一个特定的 ID，然后在 onchange 事件中定位它。

例如，如果您的 td id = "mycell"

然后在选择更改时调用函数 updateColor

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

这是功能

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

}

查看更新的小提琴

于 2012-08-28T03:25:05.147 回答
0

如果您想通过单元格坐标访问，您可以执行类似的操作

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;
}
于 2012-08-28T03:37:39.403 回答