使用javascript更改表格的背景颜色时出现问题答案

【问题标题】：Problem while changing the background color of a table using javascript使用javascript更改表格的背景颜色时出现问题
【发布时间】：2011-06-04 10:34:57
【问题描述】：

我正在尝试在 checkbox 的 onchange 事件中更改表格的 背景颜色 .我的复选框在我的桌子里面。我编写了一个简单的 javascript 代码，但如果有人可以帮助我解决这个问题，我无法更改表格的颜色。这是我的代码..

函数获取颜色（） { var color=document.getElementById("item"); var color2=document.getElementById("item").bgColor = 'red'; 警报（颜色.bgColor）；警报（“它的”+color2.bgColor）； }

虽然我的桌子有 id='item'。这是我的复选框代码

<input type="checkbox" id='id' onchange="getcolor();"/>

谢谢.......

【问题讨论】：

这个功能会提示什么？
我在这里检查我的字段的颜色

标签： javascript

【解决方案1】：

试试

 document.getElementById('yourId').style.backgroundColor = "Red";

编辑：这对我有用：

<html>
    <head>
    <script type="text/javascript">
    function getcolor()
        {

            var color=document.getElementById("item");
            var color2=document.getElementById("item").style.backgroundColor = 'red';
            alert(color.style.backgroundColor);
            alert("its"+color2.style.backgroundColor);
        }
    </script>
</head>
<body>
    <pre>
        <table border="0" align="center" id="item" style=" color:#FFF;background-color:#000066">
            <th>Some Title</th>
        </table>
    </pre> 
    <input type="checkbox" id='id' onchange="getcolor();"/>
  </body>
 </html>

【讨论】：

我已经使用了这个代码我在表格中使用这个代码
而我的更改代码是 document.getElementById('item').style.backgroundColor = "Red";

尝试编辑。好像你还没有关闭table标签，你的table是空的。

【解决方案2】：

我相信这是您的代码格式更清晰：

function getcolor() {
    var color=document.getElementById("item");
    var color2=document.getElementById("item").bgColor = 'red';
    alert(color.bgColor);
    alert("its"+color2.bgColor);
}

如上面的答案所述，您需要的是

var color2 = document.getElementById('item').style.backgroundColor = 'red';

在第二个警报中，color2 已经是一种颜色，所以 color2.bgColor（或者正确地说，color2.style.backgroundColor）是错误的。

【讨论】：

我也用过这段代码 function getcolor() { var color=document.getElementById("item"); var color2=document.getElementById("item").style.backgroundColor = 'red';警报（color.style.backgroundColor）；警报（“它的”+color2）；现在它在警告框中返回红色，但我想将我的表格颜色更改为红色。
你能粘贴表格的 HTML 吗？

【解决方案3】：

您想要的属性是style.backgroundColor 而不是bgColor。

function getcolor() { 
    var color=document.getElementById("item"); 
    var color2=document.getElementById("item").style.backgroundColor = 'red'; 
    alert(color.style.backgroundColor); 
    alert("its"+color2); 
}

如果要更改不同的表ID，可以使用以下方法：

function getcolor(tableID) { 
    var color=document.getElementById(tableID); 
    var color2=document.getElementById(tableID).style.backgroundColor = 'red';
    alert(color.style.backgroundColor); 
    alert("its"+color2); 
}

那么你可以根据表ID不同的调用它，例如：

getcolor("item");

【讨论】：

是的，brettz9 你是绝对正确的。现在我在我的第二个警报框 color2 中得到了红色。但是具有 id="item" 的桌子的颜色仍然没有变红。谢谢你的帮助，你能帮我更多吗
您是否复制了我上面的整个代码 - 您的表格是否包含行和单元格内容？例如，<table id="item"><tr><td>I'm a one-cell table!</td></tr></table> 它对我有用。
brettz9 我已经很好地检查了你的答案。我的代码现在可以工作，但我只有一个问题，我正在使用此代码，我在一个页面中有多个产品。当我单击复选框时，已选择或取消选择的表格应突出显示，但另一个表格在我的页面中变得突出显示...
上面的代码是通过ID查找一个名为“item”的表。您应该只使用一个具有该 ID 的表。如果你想支持不同的表，你应该使用不同的 ID，因为我现在已经编辑了帖子来支持。如果您的问题与这个不同，您可能应该提出一个新问题。