table 自动循环滚动

漫漫编码路

已于 2023-08-16 16:14:38 修改

阅读量904

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css 前端开发语言 ecmascript

于 2023-08-16 16:09:46 首次发布

本文链接：https://blog.youkuaiyun.com/first_class_nor/article/details/132321788

本文介绍了如何使用layui组件库构建一个带有滚动效果的前端表格，展示了如何实现在固定高度容器中动态加载更多数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格使用了 layUI组件库

layui：Layui - 极简模块化前端 UI 组件库

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格滚动</title>

    <!-- 引入layui css样式 -->
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>

<style>
    table,
    tbody {
        display: block;
    }


    table thead {
        display: table;
        width: calc(100% - 9px);
        table-layout: fixed;

    }

    tbody tr {
        display: table; 
        width: 100%;
        table-layout: fixed;
    }

    .layui-table {
        margin: 0 !important;
    }
</style>

<body class="layui-btn-container">
  
    <div>
        <table class="layui-table" lay-even>
            <tr>
                <th style="width: 5%;">序号</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </table>
    </div>
    <div id="demo" style="overflow: hidden; height: 300;">
        <div id="demo1">
            <table class="layui-table" lay-even>
                <tr>
                    <td style="width: 5%;">1</td>
                    <td>张三</td>
                    <td>13000000000</td>
                    <td>18</td>
                    <td>男</td>
                    <td>写代码</td>
                </tr>
                <tr>
                    <td style="width: 5%;">1</td>
                    <td>张三</td>
                    <td>13000000000</td>
                    <td>18</td>
                    <td>男</td>
                    <td>写代码</td>
                </tr><tr>
                    <td style="width: 5%;">1</td>
                    <td>张三</td>
                    <td>13000000000</td>
                    <td>18</td>
                    <td>男</td>
                    <td>写代码</td>
                </tr><tr>
                    <td style="width: 5%;">1</td>
                    <td>张三</td>
                    <td>13000000000</td>
                    <td>18</td>
                    <td>男</td>
                    <td>写代码</td>
                </tr><tr>
                    <td style="width: 5%;">1</td>
                    <td>张三</td>
                    <td>13000000000</td>
                    <td>18</td>
                    <td>男</td>
                    <td>写代码</td>
                </tr><tr>
                    <td style="width: 5%;">111111</td>
                    <td>张三</td>
                    <td>13000000000</td>
                    <td>18</td>
                    <td>男</td>
                    <td>写代码</td>
                </tr>
            </table>
        </div>
        <div id="demo2"></div>
    </div>

</body>

</html>
<script type="text/javascript">
    var speed = 50;
    let demo = document.querySelector('#demo')
    let demo1 = document.querySelector('#demo1')
    let demo2 = document.querySelector('#demo2')
    demo2.innerHTML = demo1.innerHTML;
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0) {
            demo.scrollTop -= demo1.offsetHeight;
        } else {
            demo.scrollTop++;
        }
    }
    var MyMar = setInterval(Marquee, speed);

    demo.onmouseover = function () {
        clearInterval(MyMar);
    }

    demo.onmouseout = function () {
        MyMar = setInterval(Marquee, speed);
    }
</script>