Table数据表格无限滚动设计(html+css+JS)

1.设计html编码如下:

Table数据表格无限滚动设计(html+css+JS)
  1 <!DOCTYPE html>
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head runat="server">
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6     <title>数据表格无限循环滚动</title>
  7     <link href="_Styles/table.css" rel="stylesheet" />
  8     <script src="_Jscripts/jquery-1.8.3.js"></script>
  9     <script type="text/javascript">
 10         var MyMarhq = ‘‘;
 11         var speedhq = 15; // 数值越大越慢
 12         $(function () {
 13            
 14             GetChuQinPlans();
 15         })
 16         function GetChuQinPlans() {
 17             $.post(URL请求地址, function (data) {
 18                 data = JSON.parse(data);
 19                 if (data.Success == 0) {
 20                     x0p({
 21                         title: "错误提示",
 22                         text: "获取当天排班计划:" + data.ResultText,
 23                         icon: "error",
 24                         buttons: [{
 25                             type: "error",
 26                             text: "关闭"
 27                         }]
 28                     });
 29                 }
 30                 else {
 31                     if (data.Data != null || data.Data.length > 0) {
 32                         clearInterval(MyMarhq);
 33                         $(.tbl-body tbody).empty();
 34                         $(.tbl-header tbody).empty();
 35                         var str = ‘‘;
 36                         var str1 = ‘‘;
 37                         $.each(data.Data, function (i, item) {
 38                             if (moment().format("HH:mm:ss") < GetTimeByDateTime(item.SignInTime)) {
 39                                 str += <tr> +
 40                                 <td> + item.ShiftName + </td> +
 41                                 <td> + item.RoutePlans + </td> +
 42                                 <td> + item.SiJi + </td> +
 43                                 <td> + item.XueYuan + </td> +
 44                                 <td> + GetTimeByDateTime(item.SignInTime) + </td> +
 45                                 <td> + item.SignInPlace + </td> +
 46                                 </tr>;
 47                             }
 48                             else {
 49                                 str1 += <tr> +
 50                                 <td><font color="gray"> + item.ShiftName + </font></td> +
 51                                 <td><font color="gray"> + item.RoutePlans + </font></td> +
 52                                 <td><font color="gray"> + item.SiJi + </font></td> +
 53                                 <td><font color="gray"> + item.XueYuan + </font></td> +
 54                                 <td><font color="gray"> + GetTimeByDateTime(item.SignInTime) + </font></td> +
 55                                 <td><font color="gray"> + item.SignInPlace + </font></td> +
 56                                 </tr>;
 57                             }
 58                         });
 59                         $(.tbl-body tbody).append(str + str1);
 60                         $(.tbl-header tbody).append(str + str1);
 61 
 62                         if (data.Data.length > 10) {
 63                             $(.tbl-body tbody).html($(.tbl-body tbody).html() + $(.tbl-body tbody).html());
 64                             $(.tbl-body).css(top, 0);
 65                             var tblTop = 0;
 66                             var outerHeight = $(.tbl-body tbody).find("tr").outerHeight();
 67                             function Marqueehq() {
 68                                 if (tblTop <= -outerHeight * data.Data.length) {
 69                                     tblTop = 0;
 70                                 } else {
 71                                     tblTop -= 1;
 72                                 }
 73                                 $(.tbl-body).css(top, tblTop + px);
 74                             }
 75 
 76                             MyMarhq = setInterval(Marqueehq, speedhq);
 77 
 78                             // 鼠标移上去取消事件
 79                             $(".tbl-header tbody").hover(function () {
 80                                 clearInterval(MyMarhq);
 81                             }, function () {
 82                                 clearInterval(MyMarhq);
 83                                 MyMarhq = setInterval(Marqueehq, speedhq);
 84                             })
 85 
 86                         }
 87                     }
 88                 }
 89             });
 90         }
 91     </script>
 92 </head>
 93 <body>
 94     <div class="tablebox">
 95         <div class="tbl-header">
 96             <table border="0" cellspacing="0" cellpadding="3">
 97                 <thead>
 98                     <tr>
 99                         <th style="text-align: center">班次</th>
100                         <th style="text-align: center">交路</th>
101                         <th style="text-align: center">司机</th>
102                         <th style="text-align: center">学员</th>
103                         <th style="text-align: center">出勤时间</th>
104                         <th style="text-align: center">出勤地点</th>
105                     </tr>
106                 </thead>
107                 <tbody style="opacity: 0;"></tbody>
108             </table>
109         </div>
110         <div class="tbl-body">
111             <table border="0" cellspacing="0" cellpadding="3">
112                 <thead>
113                     <tr>
114                         <th style="text-align: center">班次</th>
115                         <th style="text-align: center">交路</th>
116                         <th style="text-align: center">司机</th>
117                         <th style="text-align: center">学员</th>
118                         <th style="text-align: center">出勤时间</th>
119                         <th style="text-align: center">出勤地点</th>
120                     </tr>
121                 </thead>
122                 <tbody></tbody>
123             </table>
124         </div>
125     </div>
126 </body>
127 </html>
View Code

2.引入对应的table.css文件,文件内容如下:

Table数据表格无限滚动设计(html+css+JS)
 1 .tablebox {
 2     overflow: hidden;
 3     position: relative;
 4     width: 100%;
 5     height: 99.6%;
 6     border:1px solid #02BCFF;
 7     background-color: #072B5B;
 8 }
 9 
10 .tbl-header {
11     width: 100%;
12     position: absolute;
13     top: 0;
14     left: 0;
15     z-index: 999;
16 }
17 
18 .tbl-body {
19     width: 100%;
20     position: absolute;
21     top: 0;
22     left: 0;
23 }
24 .tablebox table {
25     width: 100%;
26 }
27 
28 .tablebox table th,
29 .tablebox table td {
30     font-size: 20px;
31     color: #21F4FF;
32     line-height: 45px;
33     text-align: left;
34     border:1px solid #02BCFF;
35 }
36 
37 .tablebox table tr th {
38     background-color: #0A3265;
39     cursor: pointer;
40 }
41 
42 .tablebox table tr td {
43     /*background-color: transparent;*/
44 }
45 
46 .tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
47     /*background-color: rgba(31, 31, 156, .5);*/
48 }
49 
50 .tablebox table tr td span,
51 .tablebox table tr td span {
52     font-size: 15px;
53 }
View Code

3.展示效果:(效果会正常无限滚动,图片展示为数据美容)

Table数据表格无限滚动设计(html+css+JS)

 

Table数据表格无限滚动设计(html+css+JS)

上一篇:Nginx基础 - HTTPS安全web服务


下一篇:时间转化对ios安卓兼容性