js实现表头固定

最新推荐文章于 2022-08-12 09:59:43 发布

javaStudentZhang

最新推荐文章于 2022-08-12 09:59:43 发布

阅读量7k

点赞数

本文链接：https://blog.csdn.net/javaStudentZhang/article/details/80644495

版权

思路：

一、table用div包裹，设置div的高度和滚动条，

二、克隆table的表头，添加到div中，设为浮动，

三、表头的top是滚动条的上方距离

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <link rel="stylesheet" type="text/css" href="table.css">
    <script src="table-plugin.js" type="text/javascript"></script>
    <body>
        <div id="tableContainer">
            <table id="table" border="1">
                <thead>
                    <tr><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th><th>单位</th></tr>
                </thead>
                <tbody>
                   
                </tbody>
                <tfoot>

                </tfoot>
            </table>
        </div>
    </body>
    <script>
        window.onload = function(){
            
            (function(){
                var html = "";
                for(var i=0;i<30;i++){
                    html += '<tr><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td><td>杨浦</td></tr>'
                }
                document.getElementsByTagName('tbody')[0].innerHTML = html;
            }());

            new TableFactory(document.getElementById("table")).init();
        }
        
    </script>
</html>

body{
    font-family: '微软雅黑','Courier New', Courier, monospace;
    /* padding:100px; */
}

#tableContainer{
    position: relative;
    height:400px;
    overflow: auto;
    /* border:1px solid #ccc; */
}
#table{

    border-collapse: collapse;
    text-align: center;
}
#table tr:nth-child(2n+1){
    background:#f1f3f5;
}
tr{
    transition:all 0.3s;
}
th,td{
    border:1px solid #e2e4e1;
    width:100pt;
    line-height: 30px;
}

function TableFactory(instance){
    this.instance = instance;
    this.parent = this.instance.parentNode;
    this.childrenNode = this.instance.children;
}
TableFactory.prototype = {
    init:function(){
        var theadClone = this.childrenNode[0].cloneNode(true);
        this.parent.onscroll = function(){
            var scrollTop = this.scrollTop;
            if(scrollTop == 0){
                theadClone.parentNode.removeChild(theadClone)
            }
            else{
                theadClone.style.position = "absolute";
                theadClone.style.top = scrollTop + "px";
                theadClone.style.backgroundColor = "#F1F3F5";            
                this.appendChild(theadClone);
            }
        }
        this.mouseEvent();
    },
    mouseEvent:function(){
        var trItem = null;
        for(let i in this.childrenNode){
            if(this.childrenNode[i].nodeName == "TBODY"){
                var tr = this.childrenNode[i].children;
                trItem = tr;
            }
            
        } 
        for(var i=0;i<trItem.length;i++){
            var color = '';
            trItem[i].addEventListener("mouseenter",function(){
                color =  this.style.backgroundColor;
                this.style.backgroundColor = "#E0E3ED"
            })
            trItem[i].addEventListener("mouseleave",function(){
              if(color){
                this.style.backgroundColor = color;
              }else{
                this.style.backgroundColor = "";
              }
            })
            
        }
        
    }
};