html multiple levels of expand collapse for table with many rows is slow

Question

html table has 4 levels of hierarchy in a tree type view. To give user a control to expand/collapse to any level, the following function is used. But this function takes more than 6 seconds to execute on IE8. It takes half of that time in Chrome. Any suggestions for how to speed this function up? Thanks

function showDetailLevel(level) {
    /*hide all the tr*/
    $('.dataRow').each(function() {
        $(this).hide();
    });
    /*collapse all the carets*/
    $('.detailsCarat').each(function() {
        if ($(this).hasClass('ui-icon-triangle-1-s')) {
            $(this).removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        }                       
    }); 
    /*show the rows and expand all the carets that are at a tree level above the selected level*/
    for (var i=1; i<=level;i++) {   
        $('.detailLevel'+i).each(function() {
            $(this).show();
            if (i<level) {
                $(this).find('span.ui-icon-triangle-1-e').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
            }
        }); 
    }   
}

Answer 1

There are several performance hogs in the above script. The jQuery selectors with only CSS class-names and the unneeded toggling of many class-names jump out immediately.

Use a tag-name as well when selecting for class-names ( $('tr.dataRow').each... ).

The each statements are unnecessary, but probably not that much slower than the more concise script unless we consider using the tag names:

$('tr.dataRow').hide();

/*collapse all the carets*/
$('span.detailsCarat').toggleClass('ui-icon-triangle-collapsed');

More important, toggle just a single class-name wherever possible to avoid reflows ( When does reflow happen in a DOM environment? ). This is key. Your HTML should be nested in such a way that you can toggle a single CSS class in a container element and leverage CSS selectors to accomplish all that you need: hiding, showing, and changing appearances. For example, whatever style rules apply to 'ui-icon-triangle-1-s' should be in a rule with a selector such as div.container.active .ui-icon-triangle-1 .

Answer 2

I'd try the following for starters: Add in the parent div to those classes as noted by #YOURCONTAINERDIV. I also added toggleClass for your add/remove class.

I am curious about this line of code: Can you explain why the loop of level, then doing an .each thru the collection of '.detailLevel' + i. I think alot of your issue is here.

for (var i=1; i<=level;i++) { 
    $('.detailLevel'+i).each(function() {
        $(this).show();

---

 function showDetailLevel(level) {
      /*hide all the tr*/
         $('#YOURCONTAINERDIV .dataRow').each(function() {
         $(this).hide();
});
/*collapse all the carets*/
$('#YOURCONTAINERDIV.detailsCarat').each(function() {
    if ($(this).hasClass('ui-icon-triangle-1-s')) {
        $(this).removeClass('ui-icon-triangle-1-s').toggleClass( ui-icon-triangle-1-e, ui-icon-triangle-1-s );                    
}); 
/*show the rows and expand all the carets that are at a tree level above the selected level*/
for (var i=1; i<=level;i++) {
    // I suspect a big issue is here as you are looping, then looping again thru
    // a collection of elements. 
    $('.detailLevel'+i).each(function() {
        $(this).show();
        if (i<level) {
            $(this).find('span.ui-icon-triangle-1-e').toggleClass( ui-icon-triangle-1-e, ui-icon-triangle-1-s );
        }
    }); 
}   

}