table自动滚动效果

最新推荐文章于 2025-10-10 14:38:41 发布
原创最新推荐文章于 2025-10-10 14:38:41 发布 · 1.7k 阅读
4 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #前端 #html
JavaScript 专栏收录该内容
27 篇文章
订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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;
          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> -->
    <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>
    
<!-- </body> -->
</html>