Question

我想使用一些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>

Answer 1

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

Answer 2

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

您使用的是jQuery吗？或者它必须是纯粹的JS？

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

Answer 3

如果它只是一个单个单元格（不重复），您可以给它一个特定的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;

}

查看更新后的fiddle

Answer 4

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

的操作

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;
}

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

4 个答案: