javascript多表表头固定-1

最新推荐文章于 2020-04-03 09:59:58 发布

漠北空城

最新推荐文章于 2020-04-03 09:59:58 发布

阅读量1k

点赞数

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

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

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上班的第一个工作竟然是做表头固定，弄了很久都没有弄出来，最后在各位大神的帮助下，有了最后的这个成果。（PS：经过IE11，FF，Chrome测试通过）

重点是：JS以及这个HTML前一部分。

对于这个如果有什么问题可以留言，我有时间就帮忙解答。

还有个在网上找了个很不错的资料，用JQuery的插件实现这个功能，地址是：http://www.cnblogs.com/smallsong/archive/2012/02/09/2343729.html

tableHeaderFlow.js文件：

/**
 * Created by Yuechang on 14-1-13.
 */
//表格表头的自动浮动效果
var arrTrs = new Array();
function onScroll()
{
    if(arrTrs && arrTrs.length > 0)
    {
        for(var i = 0; i < arrTrs.length; i++)
        {
            var arr = arrTrs[i];
            //top：鼠标滚动的距离
            var top =(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
            if( (top > arr[1]) && top < arr[2])
            {
                arr[0].style.position = "absolute"; //设置表头样式为浮动。
                arr[0].style.top = top+"px";
            }
            else{
                arr[0].style.position = "relative"; //清除表头浮动样式。
            }
        }
    }
}
function load (className)
{
    //获取可浮动表头列表
    var trs = document.getElementsByClassName(className);
    if(trs && trs.length > 0)
    {
        for(var i = 0; i < trs.length; i++)
        {
            var tr = trs[i];
            var arr = new Array(3);
            arr[0] = tr;                                                 //表头对象
            arr[1] = tr.parentNode.parentNode.offsetTop;                 // 表格原始位置
            arr[2] = arr[1] + tr.parentNode.parentNode.offsetHeight-30;  //表格底部的位置
            arrTrs.push(arr);
        }
    }
}
window.onscroll = onScroll;

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{width:1000px;background: #0066bb; }
    </style>
    <script type="application/javascript" src="tableHeaderFlow.js"></script>
    <script type="application/javascript">
        window.onload = function(){
            load("flowtitle");
        }
    </script>
</head>
<body>
    <h1>表头固定</h1>
    <table border="1"style="width: 1000px" 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>
</body>
</html>

漠北空城

关注

0
点赞
踩
1

收藏

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

上班的第一个工作竟然是做表头固定，弄了很久都没有弄出来，最后在各位大神的帮助下，有了最后的这个成果。（PS：经过IE11，FF，Chrome测试通过）tableHeaderFlow.js文件：/** * Created by Yuechang on 14-1-13. *///表格表头的自动浮动效果var arrTrs = new Array();function onScroll
复制链接

扫一扫