html中表table行循环滚动例子
<!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;
}
.table th {
width: 300px;
border-bottom: #333 1px dashed;
border-top: #333 1px dashed;
padding: 5px;
line-height:24px;
}
.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>
http://blog.csdn.net/fy573060627/article/details/48181099
最新文章
- WCF学习之旅—TcpTrace工具(二十五)
- transient关键字的作用
- ****基于H5的微信支付开发详解[转]
- 用python画xy散点图
- Python学习之路--面向对象
- 【转】OpenStack和Docker、ServerLess能不能决定云计算胜负吗?
- poj 3268(spfa)
- Visual Studio 2010: 调试引用的dll的代码?
- Spark随笔(三):straggler的产生原因
- 伪多项式时间算法Pseudo-polynomial Algorithms-----geeksforGeek 翻译
- 软件工程 speedsnail 第二次冲刺6
- struts2标签详解
- 关于qt5在win7下发布 &; 打包
- 代码演示C#中string和StingBuilder内存中的区别
- 在jQuery.getData中renderCallback使用不同创建方式的结果
- DTO学习系列之AutoMapper(二)
- PeopleRank从社交网络中发现个体价值
- 关于ActiveMQ的一点总结
- 【5】图解HTTP 笔记
- Delphi 字符串转日期,强大到窒息,VarToDateTime 解决了 困扰很久的小问题
热门文章
- Colorado Potato Beetle(CF的某道) &; 鬼畜宽搜
- Codeforces Round #253 (Div. 2) D. Andrey and Problem
- LinkedHashMap和HashMap的比较使用(转)
- UVA 11489 - Integer Game(找规律)
- ffmpeg常用命令
- C语言工具---Code::Blocks
- 采用DOM进行表格的修改操作
- 一个网页抓取的类支持get+post+cookie存储
- Hibernate中主键生成策略
- 使用ftp软件上传下载php文件时换行丢失bug