jquery table数据自动滚动

ww，pw

已于 2022-06-26 21:54:02 修改

阅读量1.1k

点赞数

分类专栏： css 文章标签： jquery

于 2022-06-26 21:52:37 首次发布

hzm

本文链接：https://blog.youkuaiyun.com/hhzzmm123456/article/details/125474970

版权

css 专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript动态加载表格数据，数据包括城市排名、名称、版本号、类型和次数。同时，实现了表格内容的自动滚动效果，当鼠标悬停时暂停滚动，离开时恢复。代码中使用了jQuery库来处理DOM操作。

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApp.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div class="tbl-body" style="height: 85%; overflow: hidden">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>版本号</td>
                    <td>类型</td>
                    <td>次数</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script src="js/jquery-2.1.4.min.js"></script>

</body>
</html>

```csharp
<script type="text/javascript">
        var str = '';
        var Items = [{ "Ranking": "1", "Name": "保定", "Version": "CA.29191", "Type": "296071.96", "Number": "7200000" },
        { "Ranking": "2", "Name": "沧州", "Version": "CA.29191", "Type": "93717.83", "Number": "3200000" },
        { "Ranking": "3", "Name": "秦皇岛", "Version": "CA.29191", "Type": "241071.82", "Number": "3000000" },
        { "Ranking": "4", "Name": "衡水", "Version": "972451.15", "Type": "87638.60", "Number": "2700000" },
        { "Ranking": "5", "Name": "石家庄", "Version": "939010.52", "Type": "140217.37", "Number": "72000000" },
        { "Ranking": "6", "Name": "邢台", "Version": "774274.70", "Type": "124693.90", "Number": "3700000" },
        { "Ranking": "7", "Name": "唐山", "Version": "680456.79", "Type": "50542.14", "Number": "3600000" },
        { "Ranking": "8", "Name": "张家口", "Version": "613319.87", "Type": "176075.96", "Number": "3000000" },
        { "Ranking": "9", "Name": "中油华奥", "Version": "596575.25", "Type": "387024.26", "Number": "11000000" },
        { "Ranking": "10", "Name": "承德", "Version": "589048.12", "Type": "68966.73", "Number": "2200000" },
        { "Ranking": "11", "Name": "廊坊", "Version": "515448.14", "Type": "137934.72", "Number": "3500000" },
        { "Ranking": "12", "Name": "瑞州", "Version": "399875.26", "Type": "85371.46", "Number": "2000000" },
        { "Ranking": "13", "Name": "石家庄中油", "Version": "90543.62", "Type": "20065.14", "Number": "430000" },
        { "Ranking": "14", "Name": "辛集中油", "Version": "49255.52", "Type": "8743.12", "Number": "250000" },
        { "Ranking": "15", "Name": "井陉中油", "Version": "29682.60", "Type": "2175.66", "Number": "140000" },
        { "Ranking": "16", "Name": "保定中油", "Version": "11887.73", "Type": "2944.97", "Number": "100000" }];
        $.each(Items, function (i, item) {
            str = '<tr>' +
                '<td>' + item.Ranking + '</td>' +
                '<td>' + item.Name + '</td>' +
                '<td>' + item.Version + '</td>' +
                '<td>' + item.Type + '</td>' +
                '<td>' + item.Number + '</td>' +
                '</tr>';

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

        // 实现自动滚动
        // var trNumber = $(".table_quality").find("tbody").find("tr").length;
        var scroll = setInterval('autoScroll(".tbl-body")', 1000); // 时间越小速度越快

        // 鼠标移上去取消事件
        $(".tbl-body").hover(function () {
            clearInterval(scroll);
        }, function () {
            clearInterval(scroll);
            scroll = setInterval('autoScroll(".tbl-body")', 1000);
        })

        function autoScroll(obj) {
            $(obj).find("tbody:first").animate({
                marginTop: "-10px"
            }, 10, function () {
                $(this).css({
                    marginTop: "0px"
                }).find("tr:first").appendTo(this); //将该行的margin值置零,然后插入到最后
            })
        }
    </script>