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

Question

In an application I'm writing that uses a large table of HTML tables, design requires the row and column of the hanging cell to be highlighted.

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

But:

in IE6, the performance of this plugin drops when the number of elements in a cell increases to the point where the page almost does not respond.

I thought the problems lay in the plugin, and I actually rewrote all of its functionality from scratch, just finding that I had the same performance problems.

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

I tried using jQuery.css () instead of background-color , the performance is better, but again, when the number of table cells increases the drop performance in an unusable state, and in all other browsers the performance of jQuery.css () is much slower than jQuery.addClass ( ) .

, , , , , , nth-child td. jQuery :

//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);

, . , , - : , , ? Chrome, - , " ".

Thnaks

.

Answer 1

jquery IE6. :

• html. , TDs
• , event.target TDs
• , , # 1
• , , , , css
• . , , , . , , 1/2 .
• , , ,
• , , .
• , jquery.

Answer 2

className , , CSS, . , 3x3:

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

className "sel-row- (num) sel-col- (num)", , , .

/ . , document.styleSheets, - , jQuery . , , , , , , 2-3 .

( , nth-child CSS3, jQuery, .)

Answer 3

, jQuery ?

<colgroup> ( , , jQuery), ,

IE6 <colgroup>, . , , .

Answer 4

- CSS/HTML, Javascript, , script, , JS.

colgroup, , colgroup col , , tbody, tr, td ( , ), colgroup - CSS, .