表格自动滚动

墨蓝 2023-08-17 16:56 101阅读 0赞

demo，这里需要注意需要给表头thead加上背景颜色，如果不加，表头处的滚动则会看见

<html>
        
        <head>
            <style type="text/css">
               
               .tablebox {
                height: 500px;
                overflow: hidden;
                position: relative;
                width: 1000px;
                margin: 100px auto;
            }
            
            .header {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 999;
                pointer-events: none;
            }
            
            .content {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .tablebox table {
                width: 100%;
            }
            
            .tablebox table th,
            .tablebox table td {
                font-size: 24px;
                /* color: #7ca6f4; */
                /* line-height: 45px; */
                text-align: center;
            }
            
            .tablebox table tr th {
                cursor: pointer;
            }
            
            .tablebox table tr td {
                background-color: transparent;
            }
        
            .tablebox table tr td span,
            .tablebox table tr td span {
                font-size: 24px;
            }
                
        
            </style>
        </head>
        <script src="js/jquery-2.2.1.min.js"></script>
        
        <body>
            <div id="chart_1">
            <div class="tablebox">
                <div class="header">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <thead>
                                <tr>
                                    <th style="width:10%">Operate</th>
                                    <th style="width:20%">Date</th>
                                    <th style="width:25%">Acknowledge</th>
                                    <th style="width:15%">Other1</th>
                                    <th style="width:15%">Other2</th>
                                    <th>Other3</th>
                                </tr>
                            </thead>
                            
                        </table>
                    </div>
                <div class="content">
                        <table border="0" cellspacing="0" cellpadding="0">
                            
                            <tbody>
                            </tbody>
                        </table>
                    </div>
        
                </div>
            </div></body>
        <script>
            var length = $(".content tbody").find("tr").length;
            // console.log($('#chart_1 .content tbody').html());
            // console.log($('#chart_1').children("*").$('.content').find("tbody").html());
            var MyMarhq = '';
            clearInterval(MyMarhq);
            // $('.header tbody').empty();
            // $('.content tbody').empty();
            var str = '';
            var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","SaleRough":"296071.96","SalePlan":"7200000","PlanFinish":"34.82","TonOilincome":"264.15","OilTransform":"29.62","An":"53.00","Mom":"-13.00"},
                {"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","SaleRough":"93717.83","SalePlan":"3200000","PlanFinish":"44.56","TonOilincome":"366.59","OilTransform":"11.23","An":"65.00","Mom":"43.00"},
                {"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","SaleRough":"241071.82","SalePlan":"3000000","PlanFinish":"45.74","TonOilincome":"342.32","OilTransform":"6.61","An":"34.00","Mom":"7.00"},
                {"Ranking":"4","City":"衡水","SaleIncome":"972451.15","SaleRough":"87638.60","SalePlan":"2700000","PlanFinish":"36.02","TonOilincome":"246.03","OilTransform":"11.56","An":"15.00","Mom":"-18.00"},
                {"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","SaleRough":"140217.37","SalePlan":"7200000","PlanFinish":"13.04","TonOilincome":"139.44","OilTransform":"19.23","An":"-57.00","Mom":"-48.00"},
                {"Ranking":"6","City":"邢台","SaleIncome":"774274.70","SaleRough":"124693.90","SalePlan":"3700000","PlanFinish":"20.93","TonOilincome":"138.87","OilTransform":"9.44","An":"-20.00","Mom":"-44.00"},
                {"Ranking":"7","City":"唐山","SaleIncome":"680456.79","SaleRough":"50542.14","SalePlan":"3600000","PlanFinish":"18.90","TonOilincome":"243.60","OilTransform":"16.95","An":"-29.00","Mom":"-49.00"},
                {"Ranking":"8","City":"张家口","SaleIncome":"613319.87","SaleRough":"176075.96","SalePlan":"3000000","PlanFinish":"20.44","TonOilincome":"87.09","OilTransform":"7.97","An":"2.00","Mom":"-24.00"},
                {"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","SaleRough":"387024.26","SalePlan":"11000000","PlanFinish":"5.42","TonOilincome":"93.58","OilTransform":"19.06","An":"35.00","Mom":"6.00"},
                {"Ranking":"10","City":"承德","SaleIncome":"589048.12","SaleRough":"68966.73","SalePlan":"2200000","PlanFinish":"26.77","TonOilincome":"193.24","OilTransform":"11.29","An":"30.00","Mom":"-28.00"},
                {"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","SaleRough":"137934.72","SalePlan":"3500000","PlanFinish":"14.73","TonOilincome":"95.47","OilTransform":"8.80","An":"-48.00","Mom":"-3.00"},
                {"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","SaleRough":"85371.46","SalePlan":"2000000","PlanFinish":"19.99","TonOilincome":"114.42","OilTransform":"11.42","An":"128.00","Mom":"-30.00"},
                {"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","SaleRough":"20065.14","SalePlan":"430000","PlanFinish":"21.06","TonOilincome":"213.44","OilTransform":"20.45","An":"-24.00","Mom":"-17.00"},
                {"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","SaleRough":"8743.12","SalePlan":"250000","PlanFinish":"19.70","TonOilincome":"202.67","OilTransform":"29.95","An":"19.00","Mom":"-6.00"},
                {"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","SaleRough":"2175.66","SalePlan":"140000","PlanFinish":"21.20","TonOilincome":"730.20","OilTransform":"25.55","An":"-74.00","Mom":"-52.00"},
                {"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"17","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"18","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"19","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"20","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"21","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"22","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"23","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"24","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"25","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"},
                {"Ranking":"26","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"}
            ]
        
        
            $.each(Items,function (i, item) {
                str = '<tr>'+
                    '<td>'+item.Ranking+'</td>'+
                    '<td>'+item.City+'</td>'+
                    '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
                    '<td>'+(+item.An).toFixed(2)+'</td>'+
                    '<td>'+(+item.Mom).toFixed(2)+'</td>'+
                    '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+
                    '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+
                    '</tr>'
            
                // $('.header tbody').append(str);
                $('.content tbody').append(str);
                // $('#chart_1 .header table').click(function(){
                //     alert(123);
                // });
                // $('#chart_1 .content table').click(function(){
                //     alert(123);
                // });
            });
            
            if(Items.length > 10){
        
                // $('#chart_1 .header').unbind("click"); //移除所有
                $('.header').css('pointer-events', 'none');
                $('.content tbody').html($('.content tbody').html()+$('.content tbody').html());
                $('.content').css('top', '0');
                var tblTop = 0;
                var speedhq = 50; // 数值越大越慢
                var outerHeight = $('.content tbody').find("tr").outerHeight();
                function Marqueehq(){
                    if(tblTop <= -outerHeight*Items.length){
                        tblTop = 0;
                    } else {
                        tblTop -= 1;
                    }
                    $('.content').css('top', tblTop+'px');
                }
            
                MyMarhq = setInterval(Marqueehq,speedhq);
            
                // 鼠标移上去取消事件
                $(".content tbody").hover(function (){
                    clearInterval(MyMarhq);
                },function (){
                    clearInterval(MyMarhq);
                    MyMarhq = setInterval(Marqueehq,speedhq);
                })
            
            }
            console.log($('#chart_1 .header tbody').html());
    
        </script>
        
        </html>

自己业务用到的：

//表格自动滚动  参数1：表格除表头外的长度  2 表格所在块元素
     function tableAutoScroll(length,ele) {
            var MyMarhq = '';
            var ele_id = ele.id;
            clearInterval(MyMarhq);
            if(length > 10){
                //如果是滚动表格，屏蔽上层div元素的点击事件
                $('#'+ele_id+' .header_div').css('pointer-events', 'none');
    
                $('#'+ele_id+' .content_div tbody').html($('#'+ele_id+' .content_div tbody').html()+$('#'+ele_id+' .content_div tbody').html());
                $('#'+ele_id+' .content_div').css('top', '0');
                var tblTop = 0;
                var speedhq = 30; // 数值越大越慢
                var outerHeight = $('#'+ele_id+' .content_div tbody').find("tr").outerHeight();
                function Marqueehq(){
                    if(tblTop <= -outerHeight*length){
                        tblTop = 0;
                    } else {
                        tblTop -= 1;
                    }
                    $('#'+ele_id+' .content_div').css('top', tblTop+'px');
                }
            
                MyMarhq = setInterval(Marqueehq,speedhq);
            
                // 鼠标移上去取消事件
                $("#"+ele_id+" .header_div tbody").hover(function (){
                    clearInterval(MyMarhq);
                },function (){
                    clearInterval(MyMarhq);
                    MyMarhq = setInterval(Marqueehq,speedhq);
                })
            
            }
    }

一开始仿照别人的，思路是两个表格完全一样

--------------------

后来我的思路：

将表头放到table1的thead里面，  
将内容放到table2的tbody里面。  
分别将table1，table2放到header\_div和content\_div里面。  
滚动的时候将tbody的内容复制一份接在后面，如果不接表格则会在内容滚一边之后出现空白，不能达到无缝衔接的效果。如果tbody所在div的top样式超过了行数成行高，则又重置为0。

本来还想后面试试使用一个表格，把thead和tbody放在两个div中，然后一起放入表格中，最后测试证明table里面是放不了div的，当前做法还是表较好的

参考：[http://www.jq22.com/webqd4276][http_www.jq22.com_webqd4276]

[http_www.jq22.com_webqd4276]: http://www.jq22.com/webqd4276