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

时间:2012-08-29 03:53:24

标签: javascript drop-down-menu html-table background-color

我想帮助创建一个更改表格中一个单元格的背景颜色的下拉菜单。我下面的代码可以使用,但仅适用于预定义选项的列表。现有代码如下:

<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=...>

我在编写代码的“onchange”部分时遇到了麻烦。我认为我需要创建一个变量来执行此操作...我认为我需要访问.text部分,因为我的下拉列表包含颜色名称,如“红色,蓝色,绿色等”。以下是我试图实现这一目标的方法。

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

我是否在正确的轨道上?请告诉我你将如何实现这一目标。

另外,我很想知道我是否想要将其应用到我必须做的其他更改中?

2 个答案:

答案 0 :(得分:0)

你忘了把#换成颜色=&gt; #FFFFCC

尝试:

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

答案 1 :(得分:0)

您可以使用jquery简化代码,它也可以避免许多其他跨浏览器的javascript问题。我在这里使用您的表单汇总了一个样本。

http://jsfiddle.net/M8U7D/