`
sha1064616837
  • 浏览: 40256 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

js表头冻结

    博客分类:
  • JS
阅读更多
/**
* 冻结表入口方法
* @oFrozenTable:需要冻结的表名
* @iFrozenRowHead:冻结的表头行数
* @iFrozenRowFoot:表尾巴行数
* @iFrozenColLeft:表左边行数
*/
function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)
{
        oFrozenTable.HeadRow = iFrozenRowHead;
        var oDivMaster = oFrozenTable.parentElement;
        if(null==oDivMaster) return;
        if(oDivMaster.tagName != 'DIV') return;
        if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
        {
                //创建并克隆LeftHead表格
                if((iFrozenColLeft > 0) && (iFrozenRowHead > 0))
                {
                        var oTableLH = document.createElement("TABLE");
                        var newTBody = document.createElement("TBODY");
                        oTableLH.insertBefore(newTBody);
                        oTableLH.id = "oTableLH";
                        oDivMaster.parentElement.insertBefore(oTableLH);
                        CloneTable1(oFrozenTable, oTableLH, 1, iFrozenRowHead, iFrozenColLeft);
                        oTableLH.srcTable = oFrozenTable;
                        with(oTableLH.style)
                        {
                                zIndex = 804;
                                position = 'absolute';
                                pixelLeft = oDivMaster.offsetLeft;
                                pixelTop = oDivMaster.offsetTop;
                        }
                }

                //创建并克隆LeftFoot表格
                if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0))
                {
                        var oTableLF = document.createElement("TABLE");
                        var newTBody = document.createElement("TBODY");
                        oTableLF.insertBefore(newTBody);
                        oTableLF.id = "oTableLF";
                        oDivMaster.parentElement.insertBefore(oTableLF);
                        CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft)
                        oTableLF.srcTable = oFrozenTable;
                        with(oTableLF.style)
                        {
                                zIndex = 803;
                                position = 'absolute';
                                pixelLeft = oDivMaster.offsetLeft;
                                pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16;
                        }
                }
        }
       
        //创建DivHead、创建并克隆HeadTar表格
        if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
        {
                var DivHead = document.createElement("DIV");
                oDivMaster.parentElement.insertBefore(DivHead);
                var oTableHead = document.createElement("TABLE");
                var newTBody = document.createElement("TBODY");
                oTableHead.id = "HeadTar";
                oTableHead.style.position = "relative";
                oTableHead.insertBefore(newTBody);
                DivHead.insertBefore(oTableHead);
                CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1);
                HeadTar.srcTable = oFrozenTable;
                with(DivHead.style)
                {
                        overflow = "hidden";
                        zIndex = 802;
                        width="100%";
                        pixelWidth = oDivMaster.offsetWidth - 16;
                        position = 'absolute';
                        pixelLeft = oDivMaster.offsetLeft;
                        pixelTop = oDivMaster.offsetTop;
                }
        }
       
        //创建DivFoot、创建并克隆FootTar表格
        if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
        {
                var DivFoot = document.createElement("DIV");
                oDivMaster.parentElement.insertBefore(DivFoot);
                var oTableFoot = document.createElement("TABLE");
                var newTBody = document.createElement("TBODY");
                oTableFoot.insertBefore(newTBody);
                oTableFoot.id = "FootTar";
                oTableFoot.style.position = "relative";
                DivFoot.insertBefore(oTableFoot);
                CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1)
                oTableFoot.srcTable = oFrozenTable;
                with(DivFoot.style)
                {
                        overflow = "hidden";
                        zIndex = 801;
                        pixelWidth = oDivMaster.offsetWidth - 16;
                        position = 'absolute'
                        pixelLeft = oDivMaster.offsetLeft;
                        pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
                }
        }

        //创建DivLeft、创建并克隆LeftTar表格------
        if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
        {
                var DivLeft = document.createElement("DIV");
                oDivMaster.parentElement.insertBefore(DivLeft);
                var oTableLeft = document.createElement("TABLE");
                var newTBody = document.createElement("TBODY");
                oTableLeft.insertBefore(newTBody);
                oTableLeft.id = "LeftTar";
                oTableLeft.style.position = "relative";
                DivLeft.insertBefore(oTableLeft);
                CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft)
                LeftTar.srcTable = oFrozenTable;
                with(DivLeft.style)
                {
                        overflow = "hidden";
                        zIndex = 800;
                        pixelWidth = oDivMaster.offsetWidth - 16;
                        pixelHeight = oDivMaster.offsetHeight - 16;
                        position = 'absolute';
                        pixelLeft = oDivMaster.offsetLeft;
                        pixelTop = oDivMaster.offsetTop;
                }
        }
       
        //为主DIV附加onscroll事件
        oDivMaster.attachEvent("onscroll", DivMasterScroll);
}

//+----------------------------------------------------------------------------
//
//功能描述:克隆表格
//
//输入参数:oSrcTable        源表格
//            oNewTable        新表格
//            iRowStart        克隆开始行
//            iRowEnd            克隆结束行
//            iColumnEnd        克隆结束列
//
//-----------------------------------------------------------------------------
function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd  )

{
        //循环控制参数
        var i, j, k = 0;
        //新增行、列           
        var newTR, newTD;
       
        //新表格宽度、高度           
        var iWidth = 0, iHeight = 0;
       
        //拷贝Attributes、events and styles
        oNewTable.mergeAttributes(oSrcTable);   
       
        //循环克隆指定行
        for (i = iRowStart; i < iRowEnd; i++)
        {
                newTR = oNewTable.insertRow(k);
               
                //拷贝Attributes、events and styles
                newTR.mergeAttributes(oSrcTable.rows[i]);
                iHeight += oSrcTable.rows[i].offsetHeight ;
                iWidth = 0;
               
                //循环克隆指定列
                for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++)
                {
                        newTD = oSrcTable.rows[i].cells[j].cloneNode(true);
                        iWidth += oSrcTable.rows[i].cells[j].offsetWidth ;
                        newTD.mergeAttributes(oSrcTable.rows[i].cells[j]);
                        newTR.insertBefore(newTD);
                        newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth - 1;
                        //newTD.style.pixelHeight = oSrcTable.rows[i].cells[j].offsetHeight - 1;
                }
                k++;
        }
        oNewTable.style.pixelWidth = iWidth;
        oNewTable.style.pixelHeight = iHeight;
}
function CloneTable1(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd  )
{
        //循环控制参数
        var i, j, k = 0;
        //新增行、列           
        var newTR, newTD;
       
        //新表格宽度、高度           
        var iWidth = 0, iHeight = 0;
       
        //拷贝Attributes、events and styles
        oNewTable.mergeAttributes(oSrcTable);   
        var test = $(".title");
        //循环克隆指定行
        newTR = oNewTable.insertRow(0);
               
        //拷贝Attributes、events and styles
        newTR.mergeAttributes(oSrcTable.rows[0]);
        iHeight += oSrcTable.rows[0].offsetHeight;
        iWidth = 0;
               
        //循环克隆指定列
        for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[0].cells.length: iColumnEnd); j++)
        {
            newTD = test[j].cloneNode(true);
            iWidth += test[j].offsetWidth ;
            newTD.mergeAttributes(test[j]);
            newTR.insertBefore(newTD);
            newTD.style.pixelWidth = test[j].offsetWidth - 1;
            newTD.style.pixelHeight = test[j].offsetHeight-1;
        }
        oNewTable.style.pixelWidth = iWidth;
        oNewTable.style.pixelHeight = iHeight;
}

//+----------------------------------------------------------------------------
//
//  功能描述:主DIV的onscroll事件
//
//  输入参数:无
//
//-----------------------------------------------------------------------------
function DivMasterScroll()
{
    var oDivMaster = window.event.srcElement;
    if(document.getElementById('HeadTar') != null)
    {
        document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft;
    }
    if(document.getElementById('FootTar') != null)   
    {
        document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft;
    }
    if(document.getElementById('LeftTar') != null)   
    {
        document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop;
    }
}
分享到:
评论

相关推荐

    JS冻结表头和列

    在JavaScript(JS)中,冻结表头和列是一项常见的需求,特别是在处理大数据表格时,保持表头固定不动以便用户能够更容易地浏览和理解表格内容。本文将深入探讨如何实现这一功能,同时也会提及一些相关工具和源码示例...

    table横向纵向表头冻结js代码

    这就是"table横向纵向表头冻结js代码"所关注的核心技术。 在给定的资源中,我们有两个文件:"横向纵向冻结表头.txt"和"横向冻结表头.txt"。这些文件可能包含了实现这一功能的具体JavaScript代码片段或步骤。横向...

    html表头冻结行列.rar

    为了解决这个问题,我们可以利用JavaScript(JS)来实现HTML表格的表头冻结功能,即无论表格内容如何滚动,表头始终保持可见。这个"html表头冻结行列.rar"压缩包就提供了一个简单实现这一功能的例子。 压缩包内的...

    bootstrap冻结表头所需css与js.rar

    在处理大型数据表格时,为了保持用户界面的友好性和可读性,常常需要实现表头冻结的功能,即在滚动表格内容时,表头始终保持可见。本压缩包“bootstrap冻结表头所需css与js.rar”提供了实现这一功能所需的CSS样式...

    HTML,JSP,JQ,JS冻结表单的表头和侧栏

    JavaScript还可以用于处理更复杂的逻辑,比如分页加载数据时保持表头和侧栏的冻结状态。 5. **CSS技巧** CSS在实现冻结效果中扮演关键角色。我们可以为表头和侧栏设置`position: fixed`,然后通过调整`z-index`来...

    jquery 冻结表头的代码。 我试过了,很好用。

    总结来说,这个示例提供了通过jQuery实现表格表头冻结的一种方法,对于需要创建可滚动表格但希望表头始终可见的网页开发者来说,这是一个非常实用的技巧。虽然这里使用的jQuery版本较老,但核心思路和技巧在现代前端...

    asp.net webform冻结列 冻结表头 复杂表头

    总的来说,实现ASP.NET WebForm中的冻结列和冻结表头功能需要结合HTML、CSS和JavaScript技术,理解这些基本原理后,你可以根据项目需求进行调整和优化,以提供最佳的用户体验。在实际项目中,可以参考已有的开源库或...

    table冻结表头

    首先,我们需要在HTML文件中引入jQuery库和"table冻结表头"插件的JS文件。通常,我们会在`&lt;head&gt;`标签内添加以下代码: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt; ...

    JS冻结表格,锁定表头,固定行列(上下左右4个方向)

    JS冻结窗格(表头锁定)插件,自适应表格单元格宽度,兼容主流浏览器(注:不兼容IE9以下版本的IE浏览器),代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结,因为有防止重复冻结功能),...

    实现jqGrid三级表头功能,支持冻结,拖动

    在这个项目中,我们将探讨如何实现jqGrid的三级表头功能,并且支持冻结列以及拖动列的功能。 首先,让我们了解什么是三级表头。在标准的表格中,我们通常有单一或双层的表头,而在三级表头中,列标题被分为了三个...

    HTML,JSP,JQ,JS冻结表单的表头和侧栏;

    标题"HTML, JSP, JQ, JS冻结表单的表头和侧栏"提及的技术点主要涉及到四个关键领域:HTML、JSP、jQuery(JQ)以及JavaScript(JS),下面将详细讲解如何在这些技术环境下实现这一功能。 1. **HTML**: HTML是网页的...

    html,JQ,JS行定位结合冻结列表表头

    最后,"结合了表头冻结和侧栏冻结"意味着在列表的左侧可能存在一个侧边栏,也进行了冻结处理。这种设计在多列数据的场景下特别有用,它允许用户同时查看侧边栏和主列表,而不会因为滚动而失去侧边栏的信息。 综上所...

    gridview冻结表头和列

    2. **JavaScript或jQuery插件**:利用JavaScript或者jQuery库,如`datatables.net`,它可以提供冻结列和表头的功能。通过添加必要的脚本和配置,可以在用户滚动时动态调整元素的位置,以达到冻结效果。这种方法较为...

    gridview固定冻结列与表头

    在网页开发中,GridView...综上所述,"gridview固定冻结列与表头"涉及前端布局、CSS定位、JavaScript编程、响应式设计以及性能优化等多个方面。实现这一功能不仅可以提升用户体验,也是现代网页开发中的必备技能之一。

    GridView固定表头和列 实例(GridView冻结表头和列)

    GridView冻结表头和列的需求在大数据量展示时尤为重要,因为表头的可见性有助于用户在浏览过程中始终了解列对应的数据含义。以下将详细介绍如何实现这一功能。 首先,我们需要在页面上添加一个GridView控件,并设置...

    html锁定表头冻结行列兼容多浏览器

    总结来说,实现HTML中的表头锁定和行列冻结功能涉及到CSS定位、JavaScript滚动事件监听以及浏览器兼容性的考虑。对于老版本的浏览器,如IE8,可能需要借助JavaScript来实现,而对于现代浏览器,可以利用CSS3的`...

    js表格表头跟列冻结固定代码.zip

    在这个"js表格表头跟列冻结固定代码.zip"压缩包中,包含了`index.html`(示例HTML文件)、`css`(样式文件)和`js`(JavaScript脚本)三个文件。你可以下载并运行这个代码,它提供了一个实际的实现案例。如果你具备...

    js表头跟列冻结表格代码.zip

    "js表头跟列冻结表格代码.zip" 提供的资源正是解决这个问题的一个实例,它结合了 jQuery、CSS 和 JavaScript 技术来实现这一功能。下面我们将详细探讨这个知识点。 首先,jQuery 是一个广泛使用的 JavaScript 库,...

    冻结左边表头(HTML)

    总之,冻结左边表头是通过结合HTML结构、CSS定位属性以及可能的JavaScript交互来实现的。通过掌握这些技术,开发者可以创建出用户体验更好的数据展示页面,尤其是处理大量数据时,用户能够更容易地浏览和分析信息。

    jQuery冻结表头、列

    jQuery,作为一款广泛使用的JavaScript库,提供了丰富的功能来增强网页交互,包括冻结表格的表头和列。本文将深入探讨如何利用jQuery实现这一功能。 首先,理解jQuery冻结表头的基本原理。通常,我们会创建一个固定...

Global site tag (gtag.js) - Google Analytics