使用javascript下拉菜單更改表格單元格的顏色

我想要創建一個下拉菜單來改變表格中一個單元格的背景顏色。我下面的代碼有效，但僅適用於預定義選項的列表。現有的代碼如下：使用javascript下拉菜單更改表格單元格的顏色

<form name="bgcolorForm">Try it now: 
<select onChange="if(this.selectedIndex!=0) 
document.getElementById('mycell').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> 
<table> 
    <tr> 
     <td id = "mycell">Cell One</td> 
     <td>Cell Two</td> 
    </tr> 
</table>

我想修改這個代碼，它引用了包含在現有列表值的列表（HTML顏色名稱）。對於instnace，而不是列出的選項值，我有：

<select name="bg_color" id="bg_color" onchange=...>

我有寫代碼的「平變化」部分的麻煩。我認爲我需要創建一個變量才能做到這一點...我想我需要到達.text部分，因爲我的下拉列表包含諸如「紅色，藍色，綠色等」的顏色名稱。以下是我試圖完成這個的方式。

<script type="text/javascript"> 
var e = document.getElementById("bg_color"); 
var newcolor = e.options[e.selectedIndex].text; 
</script>

我在正確的軌道上嗎？請讓我知道你會如何做到這一點。

此外，我很好奇，如果我想將這個應用到一個額外的改變，我將不得不作出？

來源

2012-08-29 Mike Burzycki

你忘了把＃的顏色=> #FFFFCC

嘗試用：

<option value="#FFFFCC">light yellow 
<option value="#CCFFFF">light blue 
<option value="#CCFFCC">light green 
<option value="#CCCCCC">gray 
<option value="#FFFFFF">white

來源

2012-08-29 04:23:51 KurL

您可以通過使用jQuery簡化代碼，它也將避免你很多其他跨瀏覽器的JavaScript的頭痛。我在這裏使用你的表格組裝了一個樣本。

http://jsfiddle.net/M8U7D/

來源

2012-08-29 04:29:06 3coins

使用javascript下拉菜單更改表格單元格的顏色

回答

相關問題