html中表table行迴圈滾動例子

最後更新：2016-11-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：function 執行 doc set border 4.0 tail style font

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv= "Content-Type" content= "text/html;charset=gbk">
<HEAD>
<TITLE>滾動表格</TITLE>

<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

html中表table行迴圈滾動例子

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

html中表table行迴圈滾動例子

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support