/**/
/**
功能:锁定表头行,表头滚动到页面顶部之后就自动锁定在顶部了。
如果表格宽度是根据百分比决定的,在页面大小改变时可以自动调整表头宽度。
使用方法: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;
}
}
}
功能:锁定表头行,表头滚动到页面顶部之后就自动锁定在顶部了。
如果表格宽度是根据百分比决定的,在页面大小改变时可以自动调整表头宽度。
使用方法: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 >
<!--
var lth = new LockTableHead( "TableId " );
// -->
</ SCRIPT >
备注:这个脚本只实现了锁定表头是一行的情况,对于多行表头的情况还没有实现。