日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

/**//**
功能：鎖定表頭行，表頭滾動到頁面頂部之后就自動鎖定在頂部了。
      如果表格寬度是根據百分比決定的，在頁面大小改變時可以自動調整表頭寬度。
使用方法：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 編輯過