javascript表头固定-2

最新推荐文章于 2024-01-24 10:25:56 发布

漠北空城

最新推荐文章于 2024-01-24 10:25:56 发布

阅读量709

点赞数

分类专栏： web前端文章标签： html表头浮动 javascript表头浮动表头固定表头浮动 javascript

本文链接：https://blog.csdn.net/yuechang5/article/details/18258439

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

感觉前一个js还是有点不怎么完善，还有其中的这种情况没有考虑进去-------表格被撑大时，表头不会对应发生变化。不过，还是稍稍会有点偏移（1-2个像素），不是非常完美。

下面贴出第二个版本：（此时每一次调用只能固定一个表头）

tableHeaderFlow.js文件：

/**
 * Created by Yuechang on 14-1-14.
 * Version 2.0
 * 代码作用：表格表头的浮动效果
 */
function onScroll(className)
{
    //获取可浮动表头列表
    var trObj = document.getElementsByClassName(className)[0];         //表头对象（tr）
    if(trObj)
    {
        //top：鼠标滚动的距离
        var top =(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;

        var tableObj = trObj.parentNode.parentNode;                    //表格对象
        var tableOldPostion = tableObj.offsetTop;                      //表格原始位置
        var tdHeight = trObj.offsetHeight;                             //表头对象的高度
        var tableFootPostion=tableOldPostion+tableObj.offsetHeight-tdHeight;//表格底部位置

        trObj.style.position="absolute";                               //设置表头样式。
        trObj.style.width = tableObj.offsetWidth + "px";               //设置表头宽度
        trObj.style.left = tableObj.offsetLeft + "px";                 //设置表头左偏移
        trObj.style.border = "1px";

        //如果，鼠标滚动的距离大于表格的原始位置，并且鼠标滚动的距离小于表格的底部
        if( top > tableOldPostion && top < tableFootPostion)
        {
            trObj.style.top = top+"px";
        }
        else{//如果表格回到原始位置，设置表格的绝对高度为表格的原始高度
            trObj.style.top = tableOldPostion-tdHeight+2+"px";
        }

        var tbodyObj = trObj.parentNode;    //tbody对象
        var trsObj = tbodyObj.children;     //tbody的孩子集合对象
        var secondTrObj = tableObj.rows[1];//tbody的第二个孩子，tr对象(非标题行)
        //tbodyObj.removeChild(tbodyObj.child(1));
        /**
         * 问题重现：如果表格中文字过长会将表格撑大，导致表头各项与表格各项不对应
         * 解决办法：重新设置表头样式，将表格中各项的宽度对应赋给表头
         */
        for(var i =0 ; i<trObj.cells.length;i++)
        {
            trObj.cells.item(i).style.width = secondTrObj.cells.item(i).offsetWidth+"px";
        }
    }
}

而与之对应的 tableHeaderFlow.html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        .style1{width: 100px; }
        .flowtitle{background: #0066bb; }
        .flowtitle2{background:greenyellow; }
    </style>
    <script type="application/javascript" src="demo7.js"></script>
    <script type="application/javascript">
        window.onscroll = function(){
            onScroll("flowtitle");
            onScroll("flowtitle2");
        }
    </script>
</head>
<body>
<br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br>
<h1>hello</h1>
<table border="1" cellpadding="0" cellspacing="0">
<tr class="flowtitle">
    <th class="style1">1</th>
    <th class="style1">2</th>
    <th class="style1">3</th>
    <th class="style1">4</th>
    <th class="style1">5</th>
    <th class="style1">6</th>
    <th class="style1">7</th>
    <th class="style1">8</th>
    <th class="style1">9</th>
    <th class="style1">10</th>
</tr>
    此处省略N个<tr>....</tr>
<tr>
    <td class="style1">1</td>
    <td class="style1">2</td>
    <td class="style1">3</td>
    <td class="style1">4</td>
    <td class="style1">5</td>
    <td class="style1">6</td>
    <td class="style1">7</td>
    <td class="style1">8</td>
    <td class="style1">9</td>
    <td class="style1">10</td>
</tr>
</table>
</div>
<br>
<table border="1"style="width: 1000px" cellpadding="0" cellspacing="0">
<tr class="flowtitle2">
    <th class="style1">11</th>
    <th class="style1">21</th>
    <th class="style1">31</th>
    <th class="style1">41</th>
    <th class="style1">51</th>
    <th class="style1">61</th>
    <th class="style1">71</th>
    <th class="style1">81</th>
    <th class="style1">91</th>
    <th class="style1">101</th>
</tr>
    此处省略N个<tr>....</tr>
<tr>
    <td class="style1">1</td>
    <td class="style1">2</td>
    <td class="style1">3</td>
    <td class="style1">4</td>
    <td class="style1">5</td>
    <td class="style1">6</td>
    <td class="style1">7</td>
    <td class="style1">8</td>
    <td class="style1">9</td>
    <td class="style1">10</td>
</tr>
</table>
</body>
</html>

漠北空城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript表头固定-2

感觉前一个js还是有点不怎么完善，还有其中的这种情况没有考虑进去-------表格被撑大时，表头不会对应发生变化。下面贴出第二个版本：（此时每一次调用只能固定一个表头）tableHeaderFlow.js文件：/** * Created by Yuechang on 14-1-14. * Version 2.0 * 代码作用：表格表头的浮动效果 */function on
复制链接

扫一扫