I have a cross-browser Javascript function that converts an HTML table into multiple DIVs that mimic the effect of freezing panes in MS Excel. When scrolling the table body, the frozen <THEAD> header rows scroll horizontally but not vertically, and the frozen row label columns scroll vertically but not horizontally. Thus the appropriate row and column label is always visible for every table cell regardless of screen size or scroll position.
The Javascript function removes the frozen rows and columns from the original table, and creates nested DIV containers for the frozen rows and columns. It sets each DIV height and width style attributes to match each row and column in the table body so the result appears like the original HTML table but with horizontal and vertical scroll bars on the table body where necessary.
This code produces the desired appearance and functionality in all mainstream browsers, but performance varies tremendously. For a 100 row x 11 column table It renders the resulting window in under 0.5 second in Safari and Google Chrome, about 11seconds in Firefox, and 50 seconds in IE8 on a dual-core Intel 2.4Ghz processor.
Other than completely regenerating the innerHtml within the Javascript function, does anyone have recommendations for speeding up the processing in IE8 and Firefox? Note that it's not the Javascript code itself that's slow, but the creation of the child nodes and especially the setting of each element.style.height or element.style.pixelHeight attribute in those child nodes.
Thanks in advance,
-Eric
