IE6 performance issues with adding className on multiple elements (jQuery tableHover plugin)

Question

In an application I write that uses a large HTML table of numbers the design requires that the row and column of the hovered cell will be highlighted.

I develop all the JS for this project using jQuery 1.3.x, and I found the tableHover plugin that does exactly what I need.

But:

on IE6 the performance of this plugin drops down as the number of cell elements rise to a point where the page is almost unresponsive.

I thought that the problems lies in the plugin and I actually rewrote it's entire functionality from scratch, just to discover that I have the same performance issues.

After debugging the code I now know that selecting a large amount of elements plus applying className (jQuery.addClass()) is extremely slow on IE6.

I tried to use jQuery.css() instead with only background-color, the performance is better, but again, when the number of table cells rise the performance drops to an unusable state, and on all other browsers the performance of jQuery.css() is way slower than jQuery.addClass().

The main problem here is that there is no common parent to a table column, so in order to style a column one needs to traverse the entire table, select each row and then find the right nth-child td. my jQuery code for this one looks like that:

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

I won't paste my entire code here because it's irrelevant for the issue. The only answer I'm looking for is: Is there a known method to do what I need in a better performance margin? I'm not looking for "Chrome" performance speed, just something faster than "non responsive".

Thnaks

Tom.

Answer 1

I have dealt with performance complex jquery on very large tables in IE6. Here is what i can offer you in terms of help:

• encode as much data in the html as possible. for example, encode the row number and col numbers in the TDs class or name attribute
• add a mouse listener to the entire table, and then use event.target to get the TDs
• parse out the location of the cell you are hovering form point #1
• again, you will probably have to add a ton of classes, but have a class for each column and each row, that way you can select both entire row and entire column with 2 class selectors, and add css to them
• cache as much as possible. if the user moves from one cell to another, check if its in a row you have already highlighted. i think this is pretty much guaranteed to happen, so you will have 1/2 the selector operations
• cache entire columns you have selected, so you dont have to select twice, same for rows
• check out this responsiveness plugin i wrote, you may want to use it.
• also, there is another post i wrote on the topic of writing fast jquery plugins.