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

I have a table that i want to "highlight" during onmouseover/onmouseout. I already know this is required in IE but not in other browsers.

我有一张桌子,我希望在onmouseover / onmouseout期间“突出显示”。我已经知道这在IE中是必需的,但在其他浏览器中则不然。

I have managed to detect the events triggering and this TR tag effectively works. (Note that the originating class "contentTableRow" doesn't seem to be causing any issues.)

我设法检测到事件触发,这个TR标签有效地工作。 (请注意,原始类“contentTableRow”似乎没有引起任何问题。)

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

All is fine and dandy, the "highlight" function fires and actually sets the appropriate class.

一切都很好,花花公子,“突出”功能触发并实际设置适当的类。

It's just that IE won't process the CSS class name change.

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

Here is a snippet of the CSS I am using to make the change.

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

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

.HighlightOff {
    background-color: #E1EEFE;
}

I can see that the Class names are getting updated when I debug it, and also check it in Firebug. But it seems that IE doesn't like this usage of classes with a TR tag.. Is it the way I am structuring the class for Tables ? Any advice ?

我可以看到类名在调试时会更新,并在Firebug中检查它。但似乎IE不喜欢使用带有TR标记的类。这是我构建Table类的方式吗?任何建议?

3 个解决方案

#1

Are you changing class instead of className? class is reserved in Javascript as the actual class declaration keyword, so the property is called className:

你是在改变class而不是className吗? class在Javascript中保留为实际的类声明关键字,因此该属性称为className:

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

Incidentally, you might just want to pass "this" to highlight instead of the id, so it doesn't need to do the document.getElementById() call

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

#2

Thanks for all the pointers. But this seems to have worked.

感谢所有指针。但这似乎有效。

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

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

Basically have to be explicit in this case about where the class is used in the HTML.

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

Note that I had to reference the TR tag and the TD tags relative to where I am using the Highlighton/off classes in the table. Thanks jensgram.

请注意,我必须引用TR标记和TD标记相对于我在表中使用Highlighton / off类的位置。谢谢jensgram。

Hope this helps anyone else with the same problem.

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

(thanks Jensgram for the lead)

(感谢Jensgram的领先)

#3

IE won't recognize "class" in JavaScript. You must use "className" as the property in IE.

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

#1