实现表格数据纵向轮播滚动样式（包括nav-tabs选项卡放三表方法）

编程语言 2023-09-06 15:26:31 阅读次数: 0

本文用到的是三张表同时滚动，并且只在数据大于4条时才进行滚动，数据太少容易有衔接空隙，当鼠标放到表格上时，数据停止滚动，移除鼠标继续滚动。

CSS部分

.gslscrollcss {
    
    
    background-color: #FFFFFF;
    border: solid 1px white;
    width: auto;
    height: 198px;
}

/*控制表格宽度*/
.tablebox {
    
    
    /*控制滚动区域高度*/
    height: 198px;
    overflow: hidden;
    position: relative;
    width: auto;
    /*margin: 100px auto;*/
}

.tbl-header, .tbl-header1, .tbl-header2, .tbl-body, .tbl-body1, .tbl-body2 {
    
    
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.tbl-header, .tbl-header1, .tbl-header2 {
    
    
    z-index: 999;
}

/*控制列宽*/
.tablebox table {
    
    
    width: 100%;
}

#table thead, #table1 thead, #table2 thead {
    
    
    background-color: #f1f1f1;
}

.tablebox table th,
.tablebox table td {
    
    
    font-size: 16px;
    color: #5d5a5a;
    line-height: 40px;
    text-align: center;
}

.tablebox table tr th {
    
    
    cursor: pointer;
}

.tablebox table tr td {
    
    
    cursor: pointer;
}

.tbl-body tr:nth-child(even) td, .tbl-body1 tr:nth-child(even) td, .tbl-body2 tr:nth-child(even) td {
    
    

}

.tablebox table tr td span,
.tablebox table tr td span {
    
    
    font-size: 16px;
}

HTML部分（主要讲三表使用方法，三张表三个id，表格头和表格内容的class名称不一样，看单表请转到文章末尾链接）

html最外层
<body class="gray-bg" style="background: #fff; padding: 10px;">
<div class="wrapper wrapper-content">
    <div class="row" style="box-shadow: 0px 0px 5px #ccc;height:340px; padding: 0 10px 10px 10px;">
        <div class="tab-content" style="margin-top:20px;">
            <div class="panel-body gslscrollcss" style="padding: 0;">
					//第一张表
					//第二张表
					//第三张表
			</div>
        </div>
    </div>
</div>
</body>
第一张表
<div class="tablebox">
    <div class="tbl-header">
        <table border="0" cellspacing="0" cellpadding="0" id="table">
            <thead>
            <tr>
                <th>排名</th>
                <th>单位编码</th>
                <th>总分</th>
                <th>时间区间</th>
            </tr>
            </thead>
            <tbody style="opacity:0;"></tbody>
        </table>
    </div>

    <div class="tbl-body">
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>排名</th>
                <th>单位编码</th>
                <th>总分</th>
                <th>时间区间</th>
            </tr>

            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
第二张表
<div class="tablebox">
    <div class="tbl-header1">
        <table border="0" cellspacing="0" cellpadding="0" id="table1">
            <thead>
            <tr>
                <th>排名</th>
                <th>单位编码</th>
                <th>总分</th>
                <th>时间区间</th>
            </tr>
            </thead>
            <tbody style="opacity:0;"></tbody>
        </table>
    </div>

    <div class="tbl-body1">
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>排名</th>
                <th>单位编码</th>
                <th>总分</th>
                <th>时间区间</th>
            </tr>

            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
第三张表
<div class="tablebox">
    <div class="tbl-header2">
        <table border="0" cellspacing="0" cellpadding="0" id="table2">
            <thead>
            <tr>
                <th>排名</th>
                <th>单位编码</th>
                <th>时间区间</th>
            </tr>
            </thead>
            <tbody style="opacity:0;"></tbody>
        </table>
    </div>

    <div class="tbl-body2">
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>排名</th>
                <th>单位编码</th>
                <th>时间区间</th>
            </tr>

            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

JS部分（post方法和若依获取的表格数据一致：return getDataTable(list);）

$(function () {
    
    
    var MyMarhq = '';
    clearInterval(MyMarhq);
    var MyMarhq1 = '';
    clearInterval(MyMarhq1);
    var MyMarhq2 = '';
    clearInterval(MyMarhq2);
    $('.tbl-body tbody, .tbl-body1 tbody, .tbl-body2 tbody, .tbl-header tbody, .tbl-header1 tbody, .tbl-header2 tbody').empty();
    var str = '';
    var Item1 = [];
    var Item2 = [];
    var Item3 = [];
    //第一张表
    $.post("/system/board/positiveList", function (res) {
    
    
        if (res.rows.length === 0) {
    
    
            $('.tbl-body tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无正向榜数据</td></tr>');
            $('.tbl-header tbody').html('');
            return;
        }
        Item1 = res.rows.map(function (row, index) {
    
    
            return {
    
    
                "num": (index + 1).toString(),
                "deptcode": row.deptcode,
                "score": row.score,
                "timeinterval": row.timeinterval
            };
        });
        $.each(Item1, function (i, item) {
    
    
            str = '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + item.deptcode + '</td>' +
                '<td>' + item.score + '</td>' +
                '<td>' + item.timeinterval + '</td>' +
                '</tr>'

            $('.tbl-body tbody').append(str);
            $('.tbl-header tbody').append(str);
        });

        if (Item1.length > 4) {
    
    
            $('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
            $('.tbl-body').css('top', '0');
            var tblTop = 0;
            var speedhq = 120; // 数值越大越慢
            var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

            function Marqueehq() {
    
    
                if (tblTop <= -outerHeight * Item1.length) {
    
    
                    tblTop = 0;
                } else {
    
    
                    tblTop -= 1;
                }
                $('.tbl-body').css('top', tblTop + 'px');
            }

            MyMarhq = setInterval(Marqueehq, speedhq);

            // 鼠标移上去取消事件
            $(".tbl-header tbody").hover(function () {
    
    
                clearInterval(MyMarhq);
            }, function () {
    
    
                clearInterval(MyMarhq);
                MyMarhq = setInterval(Marqueehq, speedhq);
            })

        }
    });

    //第二张表
    $.post("/system/board/negativeList", function (res) {
    
    
        if (res.rows.length === 0) {
    
    
            $('.tbl-body1 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无负向榜数据</td></tr>');
            $('.tbl-header1 tbody').html('');
            return;
        }
        Item2 = res.rows.map(function (row, index) {
    
    
            return {
    
    
                "num": (index + 1).toString(),
                "deptcode": row.deptcode,
                "score": row.score,
                "timeinterval": row.timeinterval
            };
        });
        $.each(Item2, function (i, item) {
    
    
            str = '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + item.deptcode + '</td>' +
                '<td>' + item.score + '</td>' +
                '<td>' + item.timeinterval + '</td>' +
                '</tr>'

            $('.tbl-body1 tbody').append(str);
            $('.tbl-header1 tbody').append(str);
        });

        if (Item2.length > 4) {
    
    
            $('.tbl-body1 tbody').html($('.tbl-body1 tbody').html() + $('.tbl-body1 tbody').html());
            $('.tbl-body1').css('top', '0');
            var tblTop = 0;
            var speedhq = 120; // 数值越大越慢
            var outerHeight = $('.tbl-body1 tbody').find("tr").outerHeight();

            function Marqueehq() {
    
    
                if (tblTop <= -outerHeight * Item2.length) {
    
    
                    tblTop = 0;
                } else {
    
    
                    tblTop -= 1;
                }
                $('.tbl-body1').css('top', tblTop + 'px');
            }

            MyMarhq1 = setInterval(Marqueehq, speedhq);

            // 鼠标移上去取消事件
            $(".tbl-header1 tbody").hover(function () {
    
    
                clearInterval(MyMarhq1);
            }, function () {
    
    
                clearInterval(MyMarhq1);
                MyMarhq1 = setInterval(Marqueehq, speedhq);
            })

        }
    });

    //第三张表
    $.post("/system/board/blackList", function (res) {
    
    
        if (res.rows.length === 0) {
    
    
            $('.tbl-body2 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无黑榜数据</td></tr>');
            $('.tbl-header2 tbody').html('');
            return;
        }
        Item3 = res.rows.map(function (row, index) {
    
    
            return {
    
    
                "num": (index + 1).toString(),
                "deptcode": row.deptcode,
                "timeinterval": row.timeinterval
            };
        });
        $.each(Item3, function (i, item) {
    
    
            str = '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + item.deptcode + '</td>' +
                '<td>' + item.timeinterval + '</td>' +
                '</tr>'

            $('.tbl-body2 tbody').append(str);
            $('.tbl-header2 tbody').append(str);
        });

        if (Item3.length > 4) {
    
    
            $('.tbl-body2 tbody').html($('.tbl-body2 tbody').html() + $('.tbl-body2 tbody').html());
            $('.tbl-body2').css('top', '0');
            var tblTop = 0;
            var speedhq = 120; // 数值越大越慢
            var outerHeight = $('.tbl-body2 tbody').find("tr").outerHeight();

            function Marqueehq() {
    
    
                if (tblTop <= -outerHeight * Item3.length) {
    
    
                    tblTop = 0;
                } else {
    
    
                    tblTop -= 1;
                }
                $('.tbl-body2').css('top', tblTop + 'px');
            }

            MyMarhq2 = setInterval(Marqueehq, speedhq);

            // 鼠标移上去取消事件
            $(".tbl-header2 tbody").hover(function () {
    
    
                clearInterval(MyMarhq2);
            }, function () {
    
    
                clearInterval(MyMarhq2);
                MyMarhq2 = setInterval(Marqueehq, speedhq);
            })

        }
    });
})

单表参考链接：https://www.cnblogs.com/chenqingbin/p/11804669.html

三张表放到nav-tabs选项卡，会出现获取不到第二三张表的高度，导致只有第一张表滚动， 需要给outerHeight指定高度

css部分
.gslscrollcss {
    
    
    /*color: #ffffff;*/
    background-color: #FFFFFF;
    border: solid 1px white;
    width: auto;
    height: 330px;
    overflow: scroll;
}

.table-striped table thead {
    
    
    background-color: transparent;
}

/*控制表格宽度*/
.tablebox {
    
    
    /*控制滚动高度*/
    height: 198px;
    overflow: hidden;
    position: relative;
    width: auto;
    /*margin: 100px auto;*/
}

.tbl-header, .tbl-header1, .tbl-header2, .tbl-body, .tbl-body1, .tbl-body2 {
    
    
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.tbl-header, .tbl-header1, .tbl-header2 {
    
    
    z-index: 999;
}

/*控制列宽*/
.tablebox table {
    
    
    width: 100%;
}

#table thead, #table1 thead, #table2 thead {
    
    
    background-color: #f1f1f1;
}

.tablebox table th,
.tablebox table td {
    
    
    font-size: 16px;
    color: #5d5a5a;
    line-height: 40px;
    text-align: center;
}

.tablebox table tr th {
    
    
    cursor: pointer;
}

.tablebox table tr td {
    
    
    cursor: pointer;
}

.tbl-body tr:nth-child(even) td, .tbl-body1 tr:nth-child(even) td, .tbl-body2 tr:nth-child(even) td {
    
    

}

.tablebox table tr td span,
.tablebox table tr td span {
    
    
    font-size: 16px;
}
html部分
<div class="col-sm-5">
<div style="margin-top:20px; padding:8px 20px;background:#fff;box-shadow:0px 0px 5px rgb(0 0 0 / 5%);border:1px solid rgba(233, 233, 233, 1) ">
        <div class="tabMenu">
            <ul>
                <li class="active"><a href="javascript:void(0);"
                                      onclick="gsl()">本月公示栏>></a></li>
            </ul>
        </div>
        <div id="tabs03" class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#positive"
                                      aria-expanded="true">正向</a></li>
                <li class=""><a data-toggle="tab" href="#negative"
                                aria-expanded="false">负向</a></li>
                <li class=""><a data-toggle="tab" href="#black"
                                aria-expanded="false">黑榜</a></li>
            </ul>
            <div class="tab-content" style="margin-top:14px;">
                <div id="positive" class="tab-pane active">
                    <div class="panel-body gslscrollcss" style="padding: 0;">
                        <div class="tablebox" style="height: 300px;">
                            <div class="tbl-header">
                                <table border="0" cellspacing="0" cellpadding="0" id="table">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>单位编码</th>
                                        <th>总分</th>
                                        <th>时间区间</th>
                                    </tr>
                                    </thead>
                                    <tbody style="opacity:0;"></tbody>
                                </table>
                            </div>

                            <div class="tbl-body">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>单位编码</th>
                                        <th>总分</th>
                                        <th>时间区间</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="negative" class="tab-pane ">
                    <div class="panel-body gslscrollcss" style="padding: 0">
                        <div class="tablebox" style="height: 300px;">
                            <div class="tbl-header1">
                                <table border="0" cellspacing="0" cellpadding="0" id="table1">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>单位编码</th>
                                        <th>总分</th>
                                        <th>时间区间</th>
                                    </tr>
                                    </thead>
                                    <tbody style="opacity:0;"></tbody>
                                </table>
                            </div>

                            <div class="tbl-body1">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>单位编码</th>
                                        <th>总分</th>
                                        <th>时间区间</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="black" class="tab-pane ">
                    <div class="panel-body gslscrollcss" style="padding: 0">
                        <div class="tablebox" style="height: 300px;">
                            <div class="tbl-header2">
                                <table border="0" cellspacing="0" cellpadding="0" id="table2">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>单位编码</th>
                                        <th>时间区间</th>
                                    </tr>
                                    </thead>
                                    <tbody style="opacity:0;"></tbody>
                                </table>
                            </div>

                            <div class="tbl-body2">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>单位编码</th>
                                        <th>时间区间</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
JS部分
$(function () {
    
    
	getBulletinBoard()
})

function getBulletinBoard() {
    
    
    //正向
    var MyMarhq = '';
    clearInterval(MyMarhq);
    var MyMarhq1 = '';
    clearInterval(MyMarhq1);
    var MyMarhq2 = '';
    clearInterval(MyMarhq2);
    $('.tbl-body tbody, .tbl-body1 tbody, .tbl-body2 tbody, .tbl-header tbody, .tbl-header1 tbody, .tbl-header2 tbody').empty();
    var str = '';
    var Item1 = [];
    var Item2 = [];
    var Item3 = [];
    $.post("/system/board/positiveList", function (res) {
    
    
        if (res.rows.length === 0) {
    
    
            $('.tbl-body tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无正向榜数据</td></tr>');
            $('.tbl-header tbody').html('');
            return;
        }
        Item1 = res.rows.map(function (row, index) {
    
    
            return {
    
    
                "num": (index + 1).toString(),
                "deptcode": row.deptcode,
                "score": row.score,
                "timeinterval": row.timeinterval
            };
        });
        $.each(Item1, function (i, item) {
    
    
            str = '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + item.deptcode + '</td>' +
                '<td>' + item.score + '</td>' +
                '<td>' + item.timeinterval + '</td>' +
                '</tr>'
            $('.tbl-body tbody').append(str);
            $('.tbl-header tbody').append(str);
        });

        if (Item1.length > 5) {
    
    
            $('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
            $('.tbl-body').css('top', '0');
            var tblTop = 0;
            var speedhq = 120; // 数值越大越慢
            var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

            function Marqueehq() {
    
    
                if (tblTop <= -outerHeight * Item1.length) {
    
    
                    tblTop = 0;
                } else {
    
    
                    tblTop -= 1;
                }
                $('.tbl-body').css('top', tblTop + 'px');
            }

            MyMarhq = setInterval(Marqueehq, speedhq);

            // 鼠标移上去取消事件
            $(".tbl-header tbody").hover(function () {
    
    
                clearInterval(MyMarhq);
            }, function () {
    
    
                clearInterval(MyMarhq);
                MyMarhq = setInterval(Marqueehq, speedhq);
            })

        }
    });

    //负向
    $.post("/system/board/negativeList", function (res) {
    
    
        if (res.rows.length === 0) {
    
    
            $('.tbl-body1 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无负向榜数据</td></tr>');
            $('.tbl-header1 tbody').html('');
            return;
        }
        Item2 = res.rows.map(function (row, index) {
    
    
            return {
    
    
                "num": (index + 1).toString(),
                "deptcode": row.deptcode,
                "score": row.score,
                "timeinterval": row.timeinterval
            };
        });
        $.each(Item2, function (i, item) {
    
    
            str = '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + item.deptcode + '</td>' +
                '<td>' + item.score + '</td>' +
                '<td>' + item.timeinterval + '</td>' +
                '</tr>'
            $('.tbl-body1 tbody').append(str);
            $('.tbl-header1 tbody').append(str);
        });

        if (Item2.length > 5) {
    
    
            $('.tbl-body1 tbody').html($('.tbl-body1 tbody').html() + $('.tbl-body1 tbody').html());
            $('.tbl-body1').css('top', '0');
            var tblTop = 0;
            var speedhq = 120; // 数值越大越慢
            var outerHeight = 40;

            function Marqueehq() {
    
    
                if (tblTop <= -outerHeight * Item2.length) {
    
    
                    tblTop = 0;
                } else {
    
    
                    tblTop -= 1;
                }
                $('.tbl-body1').css('top', tblTop + 'px');
            }

            MyMarhq1 = setInterval(Marqueehq, speedhq);

            // 鼠标移上去取消事件
            $(".tbl-header1 tbody").hover(function () {
    
    
                clearInterval(MyMarhq1);
            }, function () {
    
    
                clearInterval(MyMarhq1);
                MyMarhq1 = setInterval(Marqueehq, speedhq);
            })

        }
    });

    //黑榜
    $.post("/system/board/blackList", function (res) {
    
    
        if (res.rows.length === 0) {
    
    
            $('.tbl-body2 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无黑榜数据</td></tr>');
            $('.tbl-header2 tbody').html('');
            return;
        }
        Item3 = res.rows.map(function (row, index) {
    
    
            return {
    
    
                "num": (index + 1).toString(),
                "deptcode": row.deptcode,
                "timeinterval": row.timeinterval
            };
        });
        $.each(Item3, function (i, item) {
    
    
            str = '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + item.deptcode + '</td>' +
                '<td>' + item.timeinterval + '</td>' +
                '</tr>'
            $('.tbl-body2 tbody').append(str);
            $('.tbl-header2 tbody').append(str);
        });

        if (Item3.length > 5) {
    
    
            $('.tbl-body2 tbody').html($('.tbl-body2 tbody').html() + $('.tbl-body2 tbody').html());
            $('.tbl-body2').css('top', '0');
            var tblTop = 0;
            var speedhq = 120; // 数值越大越慢
            var outerHeight = 40;

            function Marqueehq() {
    
    
                if (tblTop <= -outerHeight * Item3.length) {
    
    
                    tblTop = 0;
                } else {
    
    
                    tblTop -= 1;
                }
                $('.tbl-body2').css('top', tblTop + 'px');
            }

            MyMarhq2 = setInterval(Marqueehq, speedhq);

            // 鼠标移上去取消事件
            $(".tbl-header2 tbody").hover(function () {
    
    
                clearInterval(MyMarhq2);
            }, function () {
    
    
                clearInterval(MyMarhq2);
                MyMarhq2 = setInterval(Marqueehq, speedhq);
            })

        }
    });
}

猜你喜欢

转载自blog.csdn.net/hexianfan/article/details/131052690
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022