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

最新推荐文章于 2021-11-01 16:31:09 发布

Jennifer_Jane

最新推荐文章于 2021-11-01 16:31:09 发布

阅读量1k

点赞数

分类专栏： web前端jquery学习文章标签： html 框架 jquery

本文链接：https://blog.csdn.net/Jennifer_Jane/article/details/49509891

版权

分享关于在iframe框架内的表格实现表头固定的代码研究，已测试谷歌和IE浏览器，适用于与后台交互的场景。主要涉及js和html部分，欢迎在更多浏览器下测试并提供反馈。

摘要由CSDN通过智能技术生成

说明：本代码目前只在谷歌和 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 = {};