| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 899 人关注过本帖
标题:大家看看这段代码,有两个问题,关于表格表头固定的
只看楼主 加入收藏
xiaoyuechuan
Rank: 2
等 级:论坛游民
帖 子:15
专家分:25
注 册:2010-4-6
结帖率:100%
收藏
已结贴  问题点数:20 回复次数:4 
大家看看这段代码,有两个问题,关于表格表头固定的
<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>
这一段有什么必要?
搜索更多相关主题的帖子: 表头 表格 代码 
2010-09-20 19:53
gulimeksoft
Rank: 4
等 级:业余侠客
威 望:4
帖 子:53
专家分:208
注 册:2010-8-5
收藏
得分:0 
<div  id="scrollTable" align=center style="height:300px;padding-top:0px;margin-top:0px;overflow:scroll;">
<table width="100%" style='border-color:black;border-collapse:collapse;border-spacing: 0px;'>
<tr style='position:relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop); z-index:200;'>
<th align=center style="width:50px;position:relative;background-color:LightSkyBlue;border-color:gray;border-style: inset;border-width: 1px 0px 1px 1px;">
&nbsp;&nbsp;</th>
<th id="thHeadId1" align=center style="position:relative;background-color:LightSkyBlue;border-color:gray;border-style: inset;border-width: 1px 0px 1px 1px;">
</th>
<th id="thHeadId2"align=center style="position:relative;background-color:LightSkyBlue;border-color:gray;border-style: inset;border-width: 1px 1px 1px 1px;">
</th>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>

</table>
</div>
表头固定'position:relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop); z-index:200;'这一句话就够了
2010-09-21 17:22
xiaoyuechuan
Rank: 2
等 级:论坛游民
帖 子:15
专家分:25
注 册:2010-4-6
收藏
得分:0 
回复 2楼 gulimeksoft
嗯,不过我现在不是要效果,而是理解不了那道题的逻辑。
你把我问题的第2问给解释一下吧。

表头固定的方法很多,我自己也能用别的方法写出来,但这不是重点。

我只是那段程序为什么那样写,我理解不了。
2010-09-24 09:19
gulimeksoft
Rank: 4
等 级:业余侠客
威 望:4
帖 子:53
专家分:208
注 册:2010-8-5
收藏
得分:20 
有的tr标签
    var top.left;                    //声明变量top,left,nt;
第一问,为什么没效果,因为上面这句声明有表达错误,改好了就可以运行
至于第2问,只是调用声明的LockTableHead这个函数而已,前面只是声明,并没有调用,传一个参数给他,就是table的id
你还可以直接这样写
<script type="text/javascript">
LockTableHead("TableId");                //根据表格id创建一个新的LockTableHead对象
</script>
2010-09-24 10:56
xiaoyuechuan
Rank: 2
等 级:论坛游民
帖 子:15
专家分:25
注 册:2010-4-6
收藏
得分:0 
回复 3楼 xiaoyuechuan
明白了,呵呵,谢谢
2010-09-24 11:56
快速回复:大家看看这段代码,有两个问题,关于表格表头固定的
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.044425 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved