How do you update table row background color in IE using Javascript/CSS?

Question

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 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.)

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.

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

.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 ?

Answer 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:

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