(转) html中表table行循环滚动例子

最新推荐文章于 2024-02-28 20:34:33 发布
最新推荐文章于 2024-02-28 20:34:33 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： .net前端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv= "Content-Type"   content= "text/html;charset=gbk">
<HEAD>
<TITLE>滚动表格</TITLE>
<!--css样式是锁定表头不动的-->
<style type="text/css"> 
.table{
         width: 100%;
         left:30%;
         border-collapse:collapse; 
         border-spacing:0;
     }
     .fixedThead{
         display: block;
         width: 100%;
     }
     .scrollTbody{
         display: block;
         height: 316px;
         overflow: hidden;
         width: 100%;
     }
     .table td {
         width: 300px;
         border-bottom: #333 1px dashed;
         padding: 5px;
         background-color:#ddd;
     }
     .table th {
         width: 300px;
         border-bottom: #333 1px dashed;
         border-top: #333 1px dashed;
         padding: 5px;
         line-height:24px;
         background-color:#cfc;
     }
     .table tr{
         border-bottom: #333 1px dashed;
         line-height:24px;
         padding: 5px;
     }
     thead.fixedThead tr th:last-child {
         color:#FF0000;
     }
</style>
<SCRIPT LANGUAGE="JavaScript"> 
//先在table的最后增加一行，然后再把第一行中的数据填充到新增加的行中，最后再删除table的第一行
function change(table){
var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
for(j=0;j<table.rows[0].cells.length;j++){//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
var cell = row.insertCell(j);//给新插入的行中添加单元格
cell.height = "24px";//一个单元格的高度，跟css样式中的line-height高度一样
cell.innerHTML = table.rows[0].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
}
table.deleteRow(0);//删除table的第一行
};
function tableInterval(){
var table = document.getElementById("test");//获得表格
change(table);//执行表格change函数，删除第一行，最后增加一行，类似行滚动
};
setInterval("tableInterval()",2000);//每隔2秒执行一次change函数，相当于table在向上滚动一样
</SCRIPT>
</HEAD>


<BODY align="center">
<H1 style="font-color:blur;">滚动表格</H1>
<table class="table" align="center">
<thead class="fixedThead" align="center">
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
</tr>
</thead>
<tbody  id="test" class="scrollTbody" align="center">
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>18</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>20</td>
</tr>
<tr>
<td>王昕</td><td>女</td><td>19</td>
</tr>
<tr>
<td>李佳</td><td>女</td><td>21</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>

哈罗北鼻1223
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html中循环生成表格数据,动态生成表格(简单实现)
weixin_30099989的博客
06-04 5972
1.案例分析1.利用对象生成假的数据，用来模拟数据库的数据。2.核心算法：利用createElement生成表格(生成 tr , td )，注意逻辑关系。1.css代码table th {width: 100px;height: 50px;border: 1px solid black;}td {color: green;text-align: center;border: 1px solid b...
h5 table自动滚动的方法css
10-11
h5 table自动滚动的方法css
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
可视化大屏表格数据滚动的几种实现方案
IO14122的博客
02-28 1164
本文主要介绍可视化大屏中实现表格数据无缝滚动的几种方案，实现原理、实现方案、具体代码等。不同方案供大家参考，还有常用的第三方滚动插件推荐。
html中表格行循环滚动例子二（前面带有圆灯闪烁效果的，可以自定义样式）
fy573060627的博客
03-18 228
<!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...
实现el-table表单自动滚动
weixin_57889610的博客
12-12 1097
然后设置计时器，并且设置鼠标移入移出事件 并且设置定时器进行数据滚动。首先 设置ref="tableRef" 获取当前的dom元素。效果是表格数据自动滚动，鼠标移入暂停滚动 移出滚动继续。
h5 table自动滚动的方法
lfl18326162160的博客
10-10 900
库位品种款式颜色数量itemCode
html中表table行循环滚动例子
热门推荐
fy573060627的博客
09-02 2万+
滚动表格   .table{          width: 100%;          left:30%;          border-collapse:collapse;           border-spacing:0;      }      .fixedThead{          display: block;          width: 100
实现表格自动无限滚动的几种方式
qq_43919694的博客
09-17 1万+
实现表格自动无限滚动的几种方式 一、js进行控制 原理：通过js获取需要滚动的元素，通过定时改变scrollTop（t.scrollTop++）或者transform（t.style.transform='translateY(1px)'） 来实现滚动，在滚动区域外进行数据的调整，并矫正因数据变化而进行的变动。 例： // 滚动 tableMove1() { var x = this.tableData2[0]; let t = document.getElemen
html固定表头，表单内容垂直循环滚动
大前端程序猿
10-17 8465
项目中需要实现一个html页面，页面中的table内容垂直滚动显示数据，如下图所示： 下面记录实现以上功能的代码： Bootstrap 101 Template .content { width: 500px; margin: 50px 50px;
table内容连续滚动
枼默
10-11 3700
&amp;amp;lt;!DOCTYPE HTML PUBLIC &amp;quot;-//W3C//DTD HTML 4.0 Transitional//EN&amp;quot; &amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt; &amp;amp;lt;/title&a
table无限循环无缝滚动.zip
09-01
表格实现无限循环 无缝滚动 在做一些需求的时候可能会用到 像 一些新闻列表或是活动公告等 通过js 实现
htmlTable数据表模板 转换pdf 用到itextsharp5.4.0
07-02
htmlTable数据表模板 转换pdf 用到itextsharp5.4.0 自定义函数 算术运算符，关系运算符，以及逻辑运算符 预定义函数getRMB(double num)getRMBs(string num) 一些默认的类型方法函数，如double, float, string, ...
jquery自下而上循环滚动table
12-14
jquery自下而上循环滚动table
php循环table实现一行两列显示的方法
10-24
主要介绍了php循环table实现一行两列显示的方法,本文直接给出实现代码,重点就是在取余方法的运用,需要的朋友可以参考下
UPS、蓄电池、空开、电缆配置计算方法.pptx
04-27
5G通信行业、网络优化、通信工程建设资料
node-v7.4.0.tar.xz
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Unity mesh减面工具 Mesh Simplify 1.12
04-27
Unity mesh减面工具 Mesh Simplify 1.12
基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
pycharm中实现table循环滚动
05-24
在 PyCharm 中实现 table 循环滚动需要使用到 Qt 的 QTableView 控件和 QAbstractTableModel 模型。下面是一个简单的示例代码： ```python from PyQt5.QtCore import Qt, QModelIndex, pyqtSignal, pyqtSlot, QAbstractTableModel from PyQt5.QtWidgets import QApplication, QMainWindow, QTableView, QVBoxLayout, QWidget class TableModel(QAbstractTableModel): def __init__(self, data=None): super().__init__() self._data = data or [] def rowCount(self, parent=QModelIndex()): return len(self._data) def columnCount(self, parent=QModelIndex()): return len(self._data[0]) def data(self, index, role=Qt.DisplayRole): if role == Qt.DisplayRole: return self._data[index.row()][index.column()] def setData(self, index, value, role=Qt.EditRole): if role == Qt.EditRole: self._data[index.row()][index.column()] = value self.dataChanged.emit(index, index, [Qt.DisplayRole]) return True return False class MainWidget(QWidget): def __init__(self, data): super().__init__() self.table_model = TableModel(data) self.table_view = QTableView() self.table_view.setModel(self.table_model) layout = QVBoxLayout() layout.addWidget(self.table_view) self.setLayout(layout) self.current_row = 0 self.row_count = len(data) @pyqtSlot() def scroll_table(self): self.current_row = (self.current_row + 1) % self.row_count self.table_view.selectRow(self.current_row) class MainWindow(QMainWindow): def __init__(self, data): super().__init__() self.main_widget = MainWidget(data) self.setCentralWidget(self.main_widget) self.timer = QTimer() self.timer.timeout.connect(self.main_widget.scroll_table) self.timer.start(1000) if __name__ == '__main__': data = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9']] app = QApplication([]) window = MainWindow(data) window.show() app.exec_() ``` 在这个示例中，我们定义了一个 `TableModel` 类来处理表格数据，并将其设置为 `QTableView` 的模型。然后创建一个 `MainWidget` 类来包含 `QTableView` 控件，并定义一个 `scroll_table` 槽函数，用于定时滚动表格。最后，我们创建一个 `MainWindow` 类来包含 `MainWidget` 并启动定时器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值