/**//**
功能：锁定表头行，表头滚动到页面顶部之后就自动锁定在顶部了。
      如果表格宽度是根据百分比决定的，在页面大小改变时可以自动调整表头宽度。
使用方法：var lth = new LockTableHead('tableId');
在IE 6上通过测试。
*/

function LockTableHead(tableId)
...{
    var t = document.getElementById(tableId);
    var ttrs = t.getElementsByTagName('tr');
    var top, left;
    var nt;

    this.ResizeTableHead = _ResizeTableHead;

    if (t)
    ...{
        nt = t.cloneNode(true);
        for(var i = nt.rows.length - 1;  i > 0; i--)
        ...{
            nt.deleteRow(i);
        }
       
        document.body.appendChild(nt);

        _ResizeTableHead();
       
        document.body.onscroll = _ScrollHead;
       
        document.body.onresize = _ResizeTableHead;
    }

    function _ScrollHead()
    ...{
        window.status = top;
        if (document.body.scrollTop >= top)
        ...{
            nt.style.top = document.body.scrollTop;
        }
        else
        ...{
            nt.style.top = top;
        }
    }

    function _ResizeTableHead()
    ...{
        nt.style.width = t.offsetWidth;
        nt.style.position = 'absolute';
        nt.style.height = "";

        top = t.offsetTop;
        left = t.offsetLeft;

        var t2 = t;
        while(t2.offsetParent)
        ...{
            t2 = t2.offsetParent;
            top += t2.offsetTop;
            left += t2.offsetLeft;
        }
        nt.style.left = left;
        _ScrollHead();
        nt.style.zIndex = 100;
        //
        var nttrs = nt.getElementsByTagName('tr');

        for(var i = 0; i < nttrs[0].childNodes.length; i++)
        ...{
            nttrs[0].childNodes[i].style.width = ttrs[0].childNodes[i].offsetWidth;
            nttrs[0].childNodes[i].style.height = ttrs[0].childNodes[i].offsetHeight;
        }
    }
}

把上面这段脚本保存为“LockTableHead.js”,在页面代码中加入对此脚本的引用，

<script language="javascript" src="LockTableHead.js"></script>
然后在页面中加入如下代码，把“TableId”换成想要锁定表头的表的ID即可

<SCRIPT LANGUAGE="JavaScript">
<!--
var lth = new LockTableHead("TableId");

//-->
</SCRIPT>
备注：这个脚本只实现了锁定表头是一行的情况，对于多行表头的情况还没有实现。

该文章在 2010/10/24 9:21:10 编辑过