$ (document) .ready에서 호출 된 Jquery 함수가 너무 오래 걸립니다. IE에서 "스크립트 실행 중지"대화 상자가 나타납니다.

Question

Excel에서와 같이 html로 "freezepane"기능을 모방 한 다음 스크립트가 있습니다. 머리글은 사용자가 결과 테이블을 스크롤 할 때 모두 스크롤됩니다.

fnAdjustTable=function(){ 

    var colCount=$('#firstTr>td').length; //get total number of column 

    var m=0; 
    var n=0; 
    var brow='mozilla'; 
    jQuery.each(jQuery.browser, function(i, val) { 
     if(val==true){ 

      brow=i.toString(); 
     } 
    }); 
    $('.tableHeader').each(function(i){ 
     if(m<colCount){ 

      if(brow=='mozilla'){ 
       $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td 

       $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div 
      } 
      else if(brow=='msie'){ 
       $('#firstTd').css("width",$('.tableFirstCol').width()); 

       $(this).css('width',$('#table_div td:eq('+m+')').width());//In IE there is difference of 2 px 
      } 
     } 
     m++; 
    }); 

    $('.tableFirstCol').each(function(i){ 
     if(brow=='mozilla'){ 
      $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight()-1);//for providing height using scrollable table column height 
     }else if(brow=='msie'){ 

      $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight()); 
     }else{ 
      $(this).css('height',$('#table_div td:eq('+colCount*n+')').height()); 
     } 
     n++; 
    }); 



} 

fnScroll=function(){ 

    $('#divHeader').scrollLeft($('#table_div').scrollLeft()); 
    $('#firstcol').scrollTop($('#table_div').scrollTop()); 
} 

문제는 "tableFirstCol"TDS를 반복 할 때, 오류가 스크립트 팝업 실행을 중지하는 것입니다. 이 작업을 수행하는 좀 더 효율적인 방법이 있습니까?

기본적으로 스크립트는 첫 번째 행/열의 너비와 일치하도록 각 상단 머리글과 사이드 창 크기를 조정합니다. 큰 기간 (사이드 헤더)으로 리포트를 실행하면 일반적으로 30 개가 넘는 사이드 헤더 행이있을 때 스크립트가 팝업됩니다.

도움을 주셨습니다.

Answer 1

당신은 당신의 선택기를 캐시해야합니다

var tableDiv = $('#table_div'), 
    divHeader = $('#divHeader'), 
    firstcol = $('#firstcol'), 
    tableFirstCol = $('.tableFirstCol'), 
    tds = $('td', tableDiv); 

당신은 당신의 열 선택기 .EQ (N)에 사용할 수 있습니다.

this.style.height = n 일 때 $(this).css("height", n)을 사용하지 마십시오. 쉽고 빠릅니다.

이 :

$('.tableHeader').each(function(i){ 
    if(m<colCount){ 
     /* ... */ 
    } 
    m++; 
}); 

가 있어야한다 :

$('.tableHeader').each(function(i){ 
    if(i<colCount){ 
     /* ... */ 
    } 
}); 

내가 당신도 (하지만 난 HTML을 볼 수있는 것)를 i<colCount 체크를해야 완전히 확실하지 않다.

브라우저 스니핑이 필요하지 않습니다. 재설정 스타일 시트와 유효한 doctype을 적용하거나 HTML5Boilerplate을 사용해보세요.

당신이 브라우저 냄새해야하는 경우 : 당신은 그냥 사용할 수 있습니다

if($.browser.mozilla){ 
    /* ... */ 
} 
else if ($.browser.msie){ 
    /* ... */ 
} 
else{ 
    /* ... */ 
} 

또한 꽤 많이 아래로 그 코드를 응축 할 수있다. DRY principle을 찾으십시오.

또한, tableFirstCol의 높이를 설정하는 대신 행의 높이를 설정하는 대신

Answer 2

각 열과 행에 대해 id 태그로 HTML을 생성 할 수 있습니다. 그런 다음 복잡한 선택자를 사용하는 대신 이름으로 선택하십시오.

$('#table_div td:eq('+colCount*n+')')은 복잡한 선택기이며, $('#row1')은 훨씬 쉽습니다.

또한 브라우저 확인을 위해 수행중인 작업이 작동하지 않을 것이라고 생각합니다. 검색된 브라우저에 대한 모든 속성을 반복하고 brow 값을 마지막으로 설정 한 코드입니다. 루프 대신에 $.browser.webkit을 사용하여 웹킷을 확인하고 $.browser.msie을 사용하여 IE를 확인하십시오. 이제 코드가 작성되었으므로 언제든지 else 사례를 실행할 것입니다. JQuery와 브라우저 객체에 대한 자세한 내용은 여기를 참조하십시오 : http://api.jquery.com/jQuery.browser/