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

Class is reserved in Javascript as the actual class declaration keyword, so the property is called className.

Up vote 1 down vote favorite 2 share g+ share fb share tw.

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?

Html css table highlighting link|improve this question asked Apr 13 '10 at 5:11giulio1,586418 97% accept rate.

– Jonathan Apr 13 '10 at 5:12 3 Try applying the background directly to the table cells: . HighlightOn td, . HighlightOn th etc. AFAIK IE is a little troublesome regarding visual styling on table rows ().

– jensgram Apr 13 '10 at 5:18 @Jensgram. I think you're onto something. Will post something shortly.

– giulio Apr 13 '10 at 7:34.

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.

This is some nice code. Very clean. But the problem seems to be related to the way IE processes the CSS.

I can see the class is assigned, and CSS is "sort of" being recognised because the "cursor" setting is working. Just not the background color update.. Weird.. but then again, it is IE. – giulio Apr 13 '10 at 7:28 I up'd your comment for the info.. thanks – giulio Apr 13 '10 at 9:28.

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. 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. Hope this helps anyone else with the same problem. (thanks Jensgram for the lead).

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

Yep.. Thanks jeff. But that's not the issue. – giulio Apr 13 '10 at 7:38.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.