大家看看这段代码,有两个问题,关于表格表头固定的
<html><head>
<title>锁定表格的表头</title>
<script type="text/javascript">
function LockTableHead(tableId)
{
var t=document.getElementById("tableId"); //获取id为tableId的元素
var ttrs=t.getElementsByTagName("tr"); //获取所有的tr标签
var top.left; //声明变量top,left,nt;
var nt;
if(t) //假如获取了id为tableId的元素
{
nt=t.cloneNode(true); //克隆tableId的元素并传值给nt变量
for(var i=nt.rows.length-1;i>0;i--) //i的初始值是1,i>0,i--
{
nt.deleteRow(i); //删除i,就是删除一行2
}
document.body.appendChild(nt); //body追加一行3
_ResizeTableHead(); //调用_ResizeTableHead()函数
document.body.onscroll=_ScrollHead; //绑定_ScrollHead()函数
document.body.onresize=_ResizeTableHead; //绑定_ResizeTableHead()函数
}
function _ScrollHead()
{
window.status=top; //设置窗口状态栏的文本为top
if(document.body.scrollTop>=top) //假如被卷进去的部分大于top
{
nt.style.top=document.body.scrollTop; //克隆表格的上边距等于被卷进去的部分
}
else //否则
{
nt.style.top=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; //把t付给t2
while(t2.offsetParent) //当存在t2的父坐标时
{
t2=t2.offsetParent; //把t2的父坐标传递给t2
top+=t2.offsetTop; //t2的上边距
left+=t2.offsetLeft; //t2的左边距
}
nt.style.left=left; //克隆的左边距等于left
_ScrollHead(); //调用_ScrollHead()函数
nt.style.zIndex=100; //层叠顺序为100,在最上层
var nttrs=nt.getElementsByTagName("tr"); //获取复制表格的tr
for(var i=0;i<nttrs[0].childNodes.length;i++) //循环所有的tr
{
nttrs[0].childNodes[i].style.width=ttrs[0].childNodes[i].offsetWidth;
nttrs[0].childNodes[i].style.height=ttrs[0].childNodes[i].offsetHeight;
}
}
}
</script>
</head>
<body>
<center>
<h1>锁定表格的表头</h1>
<hr>
<br>
<h5><a href="#" onclick="start()">拉动滚动条看效果</a></h5>
<br>
<div style="overflow:auto;height:100px"> //div的属性为滚动,高度为100px
<table id="TableId" width="200" border="1"> //id为TableId的table
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
</table>
</div>
<script type="text/javascript">
var lth=new LockTableHead("TableId"); //根据表格id创建一个新的LockTableHead对象
</script>
</center>
</body>
</html>
问题1:为什么表头没法固定不了,大家看看有什么错!
问题2:
<script type="text/javascript">
var lth=new LockTableHead("TableId"); //根据表格id创建一个新的LockTableHead对象
</script>
这一段有什么必要?