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

Change color of a table cell using javascript dropdown menu

本文关键字：单元格 颜色 表格 javascript 下拉菜单 使用      更新时间：2023-09-26

我想要一些帮助来创建一个下拉菜单，该菜单可以更改表中一个单元格的背景色。我下面的代码可以工作，但仅适用于预定义选项的列表。下面列出的现有代码：

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

我走对了吗？请告诉我你将如何做到这一点。

此外，我很好奇，如果我想将其应用于内部，我还需要做哪些额外的更改？

您忘记输入#for colors=>#FFFFCC

试试看：

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

您可以使用jquery简化代码，它还可以避免许多其他跨浏览器的javascript难题。我用你的表格整理了一个样品。

http://jsfiddle.net/M8U7D/

相关文章：