<!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的最后增加一行庇勃，然后再把第一行中的數(shù)據(jù)填充到新增加的行中违施，最后再刪除table的第一行
? function change(table){
? ? ? var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的總行數(shù)
? ? ? for(j=0;j<table.rows[0].cells.length;j++){//循環(huán)第一行的所有單元格的數(shù)據(jù)揖庄，讓其加到最后新加的一行數(shù)據(jù)中（注意下標(biāo)是從0開始的）
? ? ? ? var cell = row.insertCell(j);//給新插入的行中添加單元格
? ? ? ? cell.height = "24px";//一個單元格的高度子檀，跟css樣式中的line-height高度一樣
? ? ? ? cell.innerHTML = table.rows[0].cells[j].innerHTML;//設(shè)置新單元格的內(nèi)容正塌，這個根據(jù)需要致燥，自己設(shè)置
? ? ? }
? ? ? table.deleteRow(0);//刪除table的第一行
? };
? function tableInterval(){
? ? ? var table = document.getElementById("test");//獲得表格
? ? ? change(table);//執(zhí)行表格change函數(shù)配喳，刪除第一行蹂安，最后增加一行，類似行滾動
? };
? setInterval("tableInterval()",800);//每隔2秒執(zhí)行一次change函數(shù)彰阴，相當(dāng)于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>
效果圖如下：
