如何使用 Javascript/CSS 更新 IE 中的表格行背景颜色？

Question

我有一个表，我想在鼠标悬停/鼠标移出期间“突出显示”。我已经知道这在 IE 中是必需的，但在其他浏览器中不是必需的。

我已经成功检测到事件触发，并且此 TR 标签有效地工作。 （请注意，原始类“contentTableRow”似乎没有引起任何问题。）

class="contentTableRow" onclick="openForm('SomeID');" onmouseover="highlight('someRowID', true);" onmouseout="highlight('someRowID', false);" id="someRowID" 

一切都很好，“突出显示”函数触发并实际上设置了适当的类。

只是IE不会处理CSS类名的改变。

这是我用来进行更改的 CSS 片段。

.HighlightOn {
    cursor:pointer;
    background-color: #D1DFFF;
}

.HighlightOff {
    background-color: #E1EEFE;
}

当我调试它时，我可以看到类名称正在更新，并且还在 Firebug 中检查它。但 IE 似乎不喜欢使用带有 TR 标签的类。这是我为 Tables 构建类的方式吗？有什么建议吗？

Answer 1

您是否正在更改 class 而不是 className？ class 在 Javascript 中保留为实际的类声明关键字，因此该属性称为 className：

function highlight(id, b) {
    document.getElementById(id).className = (b ? "HighlightOn" : "HighlightOff");
}

顺便说一句，您可能只想传递“this”来突出显示而不是 id ，因此不需要执行 document.getElementById() 调用

Answer 2

感谢所有的指点。但这似乎起了作用。

TR.HighlightOn td {
    cursor:pointer;
    background-color: #D1DFFF;
}

TR.HighlightOff  td {
    cursor:pointer;
    background-color: #E1EEFE;
}

在这种情况下，基本上必须明确该类在 HTML 中的使用位置。

请注意，我必须引用与表中使用 Highlighton/off 类相关的 TR 标记和 TD 标记。谢谢詹斯格拉姆。

希望这可以帮助其他遇到同样问题的人。

（感谢 Jensgram 的领导）

Answer 3

IE 无法识别 JavaScript 中的“类”。您必须使用“className”作为 IE 中的属性。