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
4
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
3
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
1
IE won't recognize "class" in JavaScript. You must use "className" as the property in IE.
IE不会识别JavaScript中的“类”。您必须使用“className”作为IE中的属性。
#1
4
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
3
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
1
IE won't recognize "class" in JavaScript. You must use "className" as the property in IE.
IE不会识别JavaScript中的“类”。您必须使用“className”作为IE中的属性。