Progressively slower IE performance

[rchristie81]

I'm looking for an answer or solution to a problem that I'm having with
javascript + DOM code.. The code modifies table rows with a color on
hover (since :hover doesn't work in IE except on link blocks/inlines)
... It's fine when the table is 50 rows or so, but in reaching numbers
towards 180, IE visually slows down *a ton*, and I don't know if this
is a known issue with no fix, but I can't seem to find any good
documentation about it other than people complaining about it. Below is
the code that is used for the events. I'm aware of better ways to
adding/removing classes, but for this particular page's case, no other
classes need to be preserved on hover. Any help is appreciated.

(just a quicky table, repeat <tr> block as needed)

<table id="listTable">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>

....and the script, not called with window.onload(), just after the
table is finished printing out in the browser.

function trHover() {
var table = document.getElementById('listTable');
var Tbodies = table.getElementsByTagName('tbody');
for (var i=0; i<Tbodies.length; i++) {
var tBodyRows = Tbodies.getElementsByTagName('tr');
for (var j=0; j<tBodyRows.length; j++) {
tBodyRows[j].oldClass = tBodyRows[j].className;
tBodyRows[j].onmouseover = function() {
this.className = "row-on";
}
tBodyRows[j].onmouseout = function() {
this.className = this.oldClass;
}
}
}
}
trHover();

 

[VK]

...and the script, not called with window.onload(), just after the
table is finished printing out in the browser.

function trHover() {
var table = document.getElementById('listTable');
var Tbodies = table.getElementsByTagName('tbody');
for (var i=0; i<Tbodies.length; i++) {

<snip>

Holly Grail!

1. This goes to the head section (or add to your stylesheet):

<style type="text/css">
td {
behavior: url(hover.htc);
}
</style>


2. hover.htc file:
<?xml version="1.0"?>
<public>
<component>
<attach event="onmouseover" onevent="highlight()" />
<attach event="onmouseout" onevent="restore()" />
</component>


<script type="text/Jscript"><!--

function highlight() {
element.style.backgroundColor = '#DDDDDD';
}


function restore() {
element.style.backgroundColor = '#FFFFFF';
}

//--></script>

</public>

Note: Bindings are getting refactored events for the bound element
only: so you don't have to worry if the event came from the cell itself
or from some underlaying element.

I tried it in 200 row tables without any visible problems (sorry for
not posting HTML code