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

回答

相关问题