使用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使用下拉菜單更改表格單元格的顏色

回答

相關問題