HTML 滚动显示数据

2024-02-20 20:05:52
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="webtest.aspx.cs" Inherits="Dashboard.webtest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style>
        .tablebox
        {
            height: 100%; /*overflow: hidden;*/
            position: relative;
            width: 100%;
            margin: -10px auto;
            background-color: rgba(6,26,103,1);
        }
        .tbl-header
        {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .tbl-body
        {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .tablebox table
        {
            width: 100%;
        }
        .tablebox table th
        {
            font-size: 24px;
            color: white;
            line-height: 45px;
            text-align: center;
        }
        
        .tablebox table td
        {
            font-size: 24px;
            color: black;
            line-height: 45px;
            text-align: center;
        }
        
        
        
        .tablebox table tr th
        {
            background-color: #1f1f9c;
            cursor: pointer;
        }
        .tablebox table tr td
        {
            background-color: transparent;
        }
        .tbl-body tr:nth-child(even) td, .tbl-body1 tr:nth-child(even) td
        {
            background-color: rgba(31, 31, 156, .5);
        }
        .tablebox table tr td span, .tablebox table tr td span
        {
            font-size: 24px;
        }
    </style>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.2/jquery.min.js"></script>
</head>
<body>
    <div class="tablebox">
        <div class="tbl-header">
            <table border="0" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th align="center">
                            产品名称
                        </th>
                        <th align="center">
                            工单号码
                        </th>
                        <th>
                            工单数量
                        </th>
                        <th align="center">
                            工序名称
                        </th>
                        <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 align="center">
                            产品名称
                        </th>
                        <th align="center">
                            工单号码
                        </th>
                        <th>
                            工单数量
                        </th>
                        <th align="center">
                            工序名称
                        </th>
                        <th>
                            已通过良品数
                        </th>
                        <th>
                            不良数量
                        </th>
                        <th>
                            维修数量
                        </th>
                        <th>
                            完成率
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            setInterval(function () {
                location.reload();
            }, 6000000);

        });



        var MyMarhq = '';
        clearInterval(MyMarhq);
        $('.tbl-body tbody').empty();
        $('.tbl-header tbody').empty();
        var str = '';
        var Items = "";

        $.ajax({
            type: "post",
            cache: false,
            async: false,
            url: "webtest.aspx?Oper=load_list&key=" + Math.random(),
            dataType: "json",
            success: function (data) {
                Items = data;
            }
        });



        $.each(Items, function (i, item) {
            str = '<tr>' +
        '<td>' + item.PRODUCT_NAME + '</td>' +
        '<td>' + item.LOT_NAME + '</td>' +
        '<td>' + item.QUANTITY + '</td>' +
        '<td>' + item.STEP_NAME + '</td>' +
        '<td>' + item.PASS_QTY + '</td>' +
        '<td>' + item.FAIL_QTY + '</td>' +
        '<td>' + item.REPAIR_QTY + '</td>' +
        '<td>' + item.RATE + '%</td>' +
        '</tr>'

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

        if (Items.length > 10) {
            $('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
            $('.tbl-body').css('top', '0');
            var tblTop = 0;
            var speedhq = 50; // 数值越大越慢
            var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
            function Marqueehq() {
                if (tblTop <= -outerHeight * Items.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);
            })

        }
    </script>
</body>
</html>
码农公寓

相关文章
