How do you update the background color of a row in IE using Javascript / CSS?
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.
I was able to detect triggering events and this TR tag works effectively. (Note that the original "contentTableRow" class does not cause any problems.)
class="contentTableRow" onclick="openForm('SomeID');" onmouseover="highlight('someRowID', true);" onmouseout="highlight('someRowID', false);" id="someRowID"
Everything is fine and dandy, the "highlight" function fires and actually sets the appropriate class.
It's just that IE won't handle changing the CSS class name.
Here is the CSS snippet I'm using to make the changes.
.HighlightOn {
cursor:pointer;
background-color: #D1DFFF;
}
.HighlightOff {
background-color: #E1EEFE;
}
I see that the class names are updated when I debug it and also check them in Firebug. But it looks like IE doesn't like this use of TR-tagged classes. Is this how I structure the class for tables? Any advice?
a source to share
Are you changing class
instead className
? class
is reserved in Javascript as a class declaration keyword, so the property is called className
:
function highlight(id, b) {
document.getElementById(id).className = (b ? "HighlightOn" : "HighlightOff");
}
By the way, you can just pass "this" to highlight instead of id, so it doesn't need to call document.getElementById()
a source to share
Thanks for all the pointers. But it seems to have worked.
TR.HighlightOn td {
cursor:pointer;
background-color: #D1DFFF;
}
TR.HighlightOff td {
cursor:pointer;
background-color: #E1EEFE;
}
Basically, in this case, you need to be explicit about where the class is used in HTML.
Note that I had to reference the TR tag and TD tags as to where I am using the Highlighton / off classes in the table. Thanks jensgram.
Hope this helps someone else with the same problem.
(thanks to Jensgram for the leadership)
a source to share