html中table行循环上下滚动
来源:互联网 发布:摩托车骑行软件 编辑:程序博客网 时间:2024/05/21 12:43
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><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()",800);//每隔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>张三1</td><td>男</td><td>18</td> </tr> <tr> <td>李四2</td><td>男</td><td>20</td> </tr> <tr> <td>王昕3</td><td>女</td><td>19</td> </tr> <tr> <td>李佳4</td><td>女</td><td>21</td> </tr> <tr> <td>张三5</td><td>男</td><td>18</td> </tr> <tr> <td>李四6</td><td>男</td><td>20</td> </tr> <tr> <td>王昕7</td><td>女</td><td>19</td> </tr> <tr> <td>李佳8</td><td>女</td><td>21</td> </tr> <tr> <td>张三9</td><td>男</td><td>18</td> </tr> <tr> <td>李四10</td><td>男</td><td>20</td> </tr> <tr> <td>王昕11</td><td>女</td><td>19</td> </tr> <tr> <td>李佳12</td><td>女</td><td>21</td> </tr> <tr> <td>张三13</td><td>男</td><td>18</td> </tr> <tr> <td>李四14</td><td>男</td><td>20</td> </tr> <tr> <td>王昕15</td><td>女</td><td>19</td> </tr> <tr> <td>李佳16</td><td>女</td><td>21</td> </tr> <tr> <td>张三17</td><td>男</td><td>18</td> </tr> <tr> <td>李四18</td><td>男</td><td>20</td> </tr> <tr> <td>王昕19</td><td>女</td><td>19</td> </tr> <tr> <td>李佳20</td><td>女</td><td>21</td> </tr> <tr> <td>张三21</td><td>男</td><td>18</td> </tr> <tr> <td>李四22</td><td>男</td><td>20</td> </tr> <tr> <td>王昕23</td><td>女</td><td>19</td> </tr> <tr> <td>李佳24</td><td>女</td><td>21</td> </tr> <tr> <td>张三25</td><td>男</td><td>18</td> </tr> <tr> <td>李四26</td><td>男</td><td>20</td> </tr> <tr> <td>王昕27</td><td>女</td><td>19</td> </tr> <tr> <td>李佳28</td><td>女</td><td>21</td> </tr> </tbody> </table></BODY></HTML>
阅读全文
1 0
- html中table行循环上下滚动
- html中表table行循环滚动例子
- HTML文字上下循环滚动代码
- 上下循环滚动代码
- jquery上下循环滚动插件 控制li上下循环滚动
- 上下循环滚动代码JAVASCRIPT
- html中设置某个区域手动上下滚动
- HTML Table 列表滚动
- html table tr td 上下移动行实例源代码
- javascript 图片循环滚动 图片循环上下滚动
- 文字上下滚动并来回循环
- 新闻列表上下循环滚动效果
- 图片上下循环滚动的公告导航
- CSS实现上下循环滚动效果
- jquery实现文字上下循环滚动效果
- 在HTML中创建带滚动条的table
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
- html table 标题 不滚动
- Unix常用命令
- Linux Systemd 简介
- 合规审计-企业安全的基石
- html生成pdf解析问题
- GreenDAO使用笔记
- html中table行循环上下滚动
- 无心行挽
- xml之Schema约束
- 常用参考基类写法之Activity
- Generative Adversarial Nets
- ANDROID学习之路
- 中国象棋 题解
- linux c++ 多进程 管道
- OC的面向对象