内容循环滚动的表格

最新推荐文章于 2024-03-12 15:27:58 发布
最新推荐文章于 2024-03-12 15:27:58 发布
阅读量280 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cz-xjw/p/4101113.html
版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.message{ font-size:12px;color: red; border-bottom: 1px dashed #CCCCCC; margin-bottom: 5px;;}
table {
border-collapse: collapse;
border-spacing: 0px;
border: none;
width: 600px;
}
td {
border: 1px solid #CCCCCC;
}
.title {
background-color: #EAEAEA;
color: #333333;
}
.rollDiv {
padding: 1px;
overflow: hidden;
height: 100px;
}
.rollDiv table td {
font-size: 12px;
border: none;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(".rollContent").css("margin-top","0px");///很重要，IE9以下的没有此行代码无法正常运行
var count1=0;
$(".rollDiv").height($(".rollContent").height());
var rollCount = 0;
var content = $(".rollContent").html();
$(".rollContent").append(content);
setInterval(function() {
++rollCount;
if ($(".rollContent").children().first().height() == rollCount) {
$(".rollContent").append(content);
$(".rollContent").children().first().remove();
$(".rollContent").css({
"margin-top": "+=" + rollCount
});
rollCount = 0;
}
$(".rollContent").css({
"margin-top": "-=" + 1
});
}, 100);
});
</script>
</head>

<body>
<div class="message">内容循环滚动的表格</div>
<div>
<table>
<tr class="title">
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
<td>姓名</td>
</tr>
<tr>
<td colspan="6">
<div class="rollDiv">
<div class="rollContent">
<table>
<tr>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
<td>姓名1</td>
</tr>
<tr>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
<td>姓名2</td>
</tr>
<tr>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
<td>姓名3</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名5</td>
<td>姓名5</td>
<td>姓名7</td>
<td>姓名8</td>
<td>姓名4</td>
<td>姓名43</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
<tr>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
<td>姓名4</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>

</html>

转载于:https://www.cnblogs.com/cz-xjw/p/4101113.html

weixin_33851429
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
循环实现表格滚动
q18852548808的博客
04-25 845
1.重组表格数据 tableJGDatats.push({ custName: orgResult[m]['custName'], //客户 planNo: orgResult[m]['planNo'], //批次 finishedState: orgResult[m]['finishedState'], //计划状态 0正在执行，1完成 startDate: orgResult[m]['startDate'], //开始日期 finishDate: orgResul
html中表table行循环滚动例子
热门推荐
fy573060627的博客
09-02 2万+
滚动表格   .table{          width: 100%;          left:30%;          border-collapse:collapse;           border-spacing:0;      }      .fixedThead{          display: block;          width: 100
制作滚动表格，循环列表表格内容
weixin_58544706的博客
08-14 1094
滚动表格
原生js实现表格循环滚动
01-22
本文实例为大家分享了js实现表格循环滚动的具体代码，供大家参考，具体内容如下 css table{width: 500px;border: 1px solid gray;border-collapse: collapse;} th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;} .scroll-box{height: 280px;width: 500px;overflow: hidden;position: relative;} .tab-scroll{position: absolu
表格循环滚动（自己记录一下）
qq_40004867的博客
05-29 190
【代码】表格循环滚动（自己记录一下）
vue表格自动滚动
01-08
安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px;...
jQuery实现列表自动滚动循环滚动展示新闻
10-25
jQuery实现列表自动滚动循环滚动展示新闻，鼠标悬停时停止滚动并提示，离开后，继续滚动，实现的代码如下，需要的朋友可以看看
DataGridView循环滚动案例.rar
10-27
这个"DataGridView循环滚动案例"示例旨在演示如何实现一个滚动效果，使得当用户达到数据视图的最后一行时，自动返回到第一行，形成一个无缝的循环滚动效果。这种效果在展示大量数据时，可以提供更好的用户体验，特别...
表格循环滚动播放.mp4
09-01
Vue+CSS实现表格行循环滚动播放显示，代码参考 (https://blog.csdn.net/weixin_45660840/article/details/108125266)
LED大屏播放中表格内容超长自动滚动
09-15
实时LED信息发布系统中，数据以表格的形式显示，当单元格中的内容超长时，自动从右向左滚动。费了点时间，做了个雏形，需要的可以下载继续完善。项目文件齐全，仅供分享。
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
表格滚动播放（播完隔一段时间可以继续播放）
11-09
表格滚动播放（播完隔一段时间可以继续播放），并且每五条一次
jquery自下而上循环滚动table
12-14
jquery自下而上循环滚动table
table表格自动循环滚动
LIUupup_的博客
11-27 1024
实现效果：自动循环滚动局部引入或全局引入后，用组件包住要滚动的表格，并将表格数据传进去。参数：detailData是表格数据数组，classOptionThree是滚动的参数，这个实现效果是表头也会跟着滚动，要想表头不滚动很简单，利用两个表格组件，1. 需要滚动的表格去掉表头，用组件包着，2. 将另一个表格放在组件外边，只显示表格标题。这个组件有个缺陷：数据更新的时候，dom却不会更新。为了解决这个问题，可以利用v-if的强制刷新。在数据有更新时先将设为false,过100毫秒再设为true。
html中表格行循环滚动例子二（前面带有圆灯闪烁效果的，可以自定义样式）
fy573060627的博客
03-18 248
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title></title> <style> @key...
table表格数据无缝循环滚动
Jadeon
09-02 8017
分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox"> <div class="tbl-header"> <table border="0" cellspacing="0" cellpadding="0"> ...
elementui el-table表格自动循环滚动【超详细图解】
最新发布
EFFY
03-12 4563
【代码】elementui el-table表格自动循环滚动【超详细图解】
vue的table实现表格循环滚动_Excel电子表格实现纯表格循环扩展报表
weixin_35749786的博客
01-15 459
场景描述在做报表的时候，我们会遇到制作循环报表的时候。循环扩展报表是按照某个指定的字段自动循环扩展出多个表格的一类报表。它主要分为纯表格循环扩展和图形循环扩展。下面我们来讲讲如何实现纯表格循环。如下图，员工信息描述数据比较多，希望通过一个表格展现该对象的所有数据，并且报表布局为多个表格呈上下式段落布局，每个表格结构一致。纯表格循环扩展报表实现步骤1、 创建数据集查询出数据。这类型的报表通常用数据集...
HTML+JS实现列表循环滚动信息展示
Start_Simple的博客
03-13 1889
列表循环滚动信息展示
Layui 动态表格无缝循环滚动
05-18
Layui的表格组件支持表格滚动，但是没有提供无缝循环滚动的功能。如果你需要实现无缝循环滚动，可以使用一些第三方插件或者自己编写代码实现。 其中一个比较简单的方法是使用jQuery插件jRumbleTable，它可以让表格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值