[英]Jquery function called from $(document).ready takes too long - IE pops up “stop running script” dialog
我有以下脚本来模仿html中的“ freezepane”功能,例如在excel中,当用户滚动结果表时,右侧和标头都将滚动。
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多个侧面标题行时弹出脚本。
任何帮助表示赞赏!
您可以为每个列和行生成带有id
标签的HTML。 然后只需按名称进行选择,而不使用复杂的选择器。
我会说$('#table_div td:eq('+colCount*n+')')
是一个复杂的选择器,而$('#row1')
则容易得多。
另外-我相信您正在做的浏览器检查将无法正常工作。 您拥有的代码会遍历检测到的浏览器的所有属性,并将brow
值设置为最后一个。 可以使用$.browser.webkit
类的东西来检查webkit,使用$.browser.msie
来检查IE,而不是循环。 就像现在的代码一样,我认为您将始终执行else
情况。 有关jQuery浏览器对象的更多信息,请参见此处: http : //api.jquery.com/jQuery.browser/
您需要缓存选择器:
var tableDiv = $('#table_div'),
divHeader = $('#divHeader'),
firstcol = $('#firstcol'),
tableFirstCol = $('.tableFirstCol'),
tds = $('td', tableDiv);
您可以使用列选择器.eq(n)。
当this.style.height = n
时$(this).css("height", n)
请勿使用$(this).css("height", n)
; 更容易,更快。
这个:
$('.tableHeader').each(function(i){
if(m<colCount){
/* ... */
}
m++;
});
应该:
$('.tableHeader').each(function(i){
if(i<colCount){
/* ... */
}
});
而且我不确定,您甚至需要i<colCount
检查(但我必须查看HTML)。
浏览器嗅探可能没有必要。 尝试应用重置样式表和有效的doctype
或使用HTML5Boilerplate 。
如果您必须浏览器嗅探:您可以使用:
if($.browser.mozilla){
/* ... */
}
else if ($.browser.msie){
/* ... */
}
else{
/* ... */
}
您也可以将代码压缩很多。 查找DRY原理 。
另外,关于设置tableFirstCol
的高度,您不能只设置行的高度吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.