iframe框架内 表头固定 研究分享

说明：本代码目前只在谷歌 和 IE 下做过测试，如有兴趣，希望大家能在更多的浏览器测试，并提出更多的宝贵意见，共同学习！

注意：本代码是在基于iframe框架的基础上做的，有与后台的互动，js、html 则是部分代码

js：

/**

* 固定表头（兼容IE）

*/

function resetTableWidth(){

if(_maxPageDataNum >10)

{

if($("#tempHeader").length == 0)

{

$("#data-list").wrap('<div id="fixedTal" style="overflow:auto;height:367px;"></div>');

$("#fixedTal").before('<div id="tempHeader" style="overflow-x:auto;margin-right:20px; display:none;"><table class="common-table"><thead>'+$("#data-list thead").html()+'</thead></table></div>');

}

if($("#fixedTal").find("thead tr").css("display") == "none"){

$("#fixedTal").css("margin-top", "0").find("thead tr").removeClass("hiddenC");

}

var obj = {};

if(navigator.userAgent.indexOf('MSIE') < 0){// 非IE

$("#fixedTal thead tr th").each(function(){ // 给表格th宽度赋值

if($(this).css("display") != "none")

{

obj[$(this).attr("name")] = $(this).outerWidth();

}

});

$("#fixedTal tbody tr td").each(function(){ // 给表格每一个td宽度赋值

if($(this).css("display") != "none")

{

$(this).css("width", obj[$(this).attr("name")] - 20);

}

});

$("#tempHeader thead tr th").each(function(){ // 给固定表格的表头 th 宽度赋值

if($(this).css("display") != "none")

{

$(this).css("width", obj[$(this).attr("name")] - 20).css("display", "inline-block");

}

});

$("#fixedTal").css("margin-top", "-15px").find("thead tr").addClass("hiddenC"); // 隐藏被复制的表格的表头，并设置margin-top值，盖住固定表头的滚动条

$("#tempHeader").css("display", "block");// 显示固定表头

$("#fixedTal table").css("width", $("#tempHeader table").outerWidth());//设置表格宽度

}else{

//初始化表格宽度

$("#fixedTal table").css("width", "100%");// 初始化表格宽度

$("#tempHeader table").css("width", "100%");

var num = 0;

$("#fixedTal thead tr th").each(function(){//设置ie下面被复制表格表头宽度，列数累加

if($(this).css("display") != "none")

{

num++;

obj[$(this).attr("name")] = $(this).outerWidth() + 20;

}

});

$("#fixedTal tbody tr td").each(function(){

if($(this).css("display") != "none")

{

$(this).css("width", obj[$(this).attr("name")]);

}

});

var TblWidth = $(window.parent.frames["rightContentFrame"].document).find("#fixedTal table").outerWidth() + (num*55);// 根据列数赋值表格宽度

$("#tempHeader thead tr th").each(function(){

if($(this).css("display") != "none")

{

$(this).css("width", obj[$(this).attr("name")])/*.css("display", "inline-block")*/;

}

});

$("#tempHeader tbody").css("display","none");

var _top = 0;

if( !(navigator.appVersion.split(';')[1].replace(/[ ]/g,'')=='MSIE8.0') )//兼容ie9及以上版本

{

_top = "-15px";

}

$("#fixedTal").css("margin-top", _top).find("thead tr").addClass("hiddenC");

$("#tempHeader").css("display", "block");

$("#fixedTal table").css("width", TblWidth);//给表格宽度赋值

$("#tempHeader table").css("width", TblWidth);

}

fixedTal.onscroll = function(){// 滚动条联动

var l = fixedTal.scrollLeft;

tempHeader.scrollLeft = l;

};

}

}

html：

<div class="search-result" data-search-result="target1" style="margin-bottom:30px\9;">

<div class="search-result-table" style="overflow-x:auto; width:100%">

<table id="data-list" class="common-table" >

<thead>

<tr >

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</div>