欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html中表格table冻结行和列

程序员文章站 2022-07-12 11:54:19
...

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>完美冻结列和行 </title>
    <style type="text/css">
        .FixedHeaderColumnsTableDiv
        {
            overflow: auto;
            position: relative;
        }
        .FixedCell
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            left: expression(this.parentElement.offsetParent.scrollLeft);
            z-index: 1800;
        }
        .FixedHeaderRow1
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            background-color: #ccc;
            z-index: 300;
        }
        .FixedHeaderRow2
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 290;
            background-color:#ffccff;
        }
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            z-index: 200;
            background-color: Aqua;
        }
    </style>
</head>
<body>
    <div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
        <table border="0" cellpadding="0" cellspacing="0" width="1200px">
            <tr class="FixedHeaderRow1">
                <td class="FixedCell" style="width: 80px">
                    header1
                </td>
                <td class="FixedCell" style="width: 80px">
                    header2
                </td>
                <td class="FixedCell" style="width: 80px">
                    header3
                </td>
                <td class="FixedCell" style="width: 80px">
                    header4
                </td>
                <td style="width: 80px">
                    header5
                </td>
                <td style="width: 80px">
                    header6
                </td>
                <td style="width: 80px">
                    header7
                </td>
                <td style="width: 80px">
                    header8
                </td>
                <td style="width: 80px">
                    header9
                </td>
                <td style="width: 80px">
                    header10
                </td>
            </tr>
            <tr class="FixedHeaderRow2">
                <td class="FixedCell" style="width: 80px" align="center">
                    ss
                </td>
                <td class="FixedCell" style="width: 80px" align="center">
                    ss
                </td>
                <td class="FixedCell" style="width: 80px">
                    header16
                </td>
                <td class="FixedHeaderColumn1" colspan="7" align="center">
                    header17dddddddddddd
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

 以上第一种方式摘自:http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6

 

 

 

下面开始第二种方式:

        <html>
                <head>
                    <title>表格行列冻结示例</title>
                    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
                    <style>
                        td
                        {
                            height:30px;
                            width:180px;
                        }
                    </style>        
                </head>
                <body>
                    <div style="OVERFLOW: scroll;width:100%;height:140px;">
                        <table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">
                            <tr>
                                <td nowrap>第一列</td>
                                <td nowrap>第二列</td>
                                <td nowrap>第三列</td>
                                <td nowrap>第四列</td>
                                <td nowrap>第无列</td>
                                <td nowrap>第六列</td>
                                <td nowrap>第七列</td>
                                <td nowrap>第八列</td>
                            </tr>
                            <tr>
                                <td nowrap>第一行</td>
                                <td nowrap>1.1</td>
                                <td nowrap>1.2</td>
                                <td nowrap>1.3</td>
                                <td nowrap>1.4</td>
                                <td nowrap>1.5</td>
                                <td nowrap>1.6</td>
                                <td nowrap>1.7</td>
                            </tr>
                            <tr>
                                <td nowrap>第二行</td>
                                <td nowrap>2.1</td>
                                <td nowrap>2.2</td>
                                <td nowrap>2.3</td>
                                <td nowrap>2.4</td>
                                <td nowrap>2.5</td>
                                <td nowrap>2.6</td>
                                <td nowrap>2.7</td>
                            </tr>
                            <tr>
                                <td nowrap>第三行</td>
                                <td nowrap>3.1</td>
                                <td nowrap>3.2</td>
                                <td nowrap>3.3</td>
                                <td nowrap>3.4</td>
                                <td nowrap>3.5</td>
                                <td nowrap>3.6</td>
                                <td nowrap>3.7</td>
                            </tr>
                            <tr>
                                <td nowrap>第四行</td>
                                <td nowrap>4.1</td>
                                <td nowrap>4.2</td>
                                <td nowrap>4.3</td>
                                <td nowrap>4.4</td>
                                <td nowrap>4.5</td>
                                <td nowrap>4.6</td>
                                <td nowrap>4.7</td>
                            </tr>
                        </table>
                    </div>
                    <script language="javascript" src="frozenTable.js"></script>
                    <script language="javascript">
                        FrozenTable(oFrozenTable, 1, 1, 1);

						function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)
{
        oFrozenTable.HeadRow = iFrozenRowHead;
        var oDivMaster = oFrozenTable.parentElement;
        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);
                        CloneTable(oFrozenTable, oTableLH, 0, 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;
                        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;
                        newTR.insertBefore(newTD);
                        newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth;
                }
                k++;
        }
        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;
    }
}
                    </script>
                </body>
            </html>

 这个第二种方式摘自:http://blog.csdn.net/jiacky/article/details/1746976