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

我想使用一些JavaScript代码来更改表格中单个单元格的背景颜色。使用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>

来源

2012-08-28 Mike Burzycki

至少有10种方法可以解决这个问题。最简单的是给表格单元一个ID和做：document.getElementById（'theID'）。style.backgroundColor = ... – FrankieTheKneeMan

您正在寻找这样的事情？ http://jsfiddle.net/2KdmA/ 但是，如果你要严重操纵我建议使用jQuery。

来源

2012-08-28 03:24:08 janith

是的，谢谢，这是我正在寻找...但我有一个额外的题。 –

只在电池上使用：document.getElementById('theID').style.backgroundColor ="#" + value。

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

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

来源

2012-08-28 03:24:22

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

来源

2012-08-28 03:25:05 hsalama

如果要按单元坐标访问y你可以做类似

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-28 03:37:39

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

回答

相关问题