【JQuery】table 表格自动滚动的两种效果

最新推荐文章于 2022-12-06 23:10:27 发布

◣NSD◥

最新推荐文章于 2022-12-06 23:10:27 发布

阅读量2.7k

点赞数 4

分类专栏：『前端』文章标签： table 自动滚动 scroll auto

本文链接：https://blog.csdn.net/shaotaiban1097/article/details/100607721

版权

『前端』专栏收录该内容

23 篇文章 0 订阅

订阅专栏

动态效果

在这里插入图片描述

在线预览

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>table-auto-scroll</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
      body {
        height: 100%;
        width: 99%;
      }

      div {
        height: 300px;
        width: 100%;
        overflow-y: auto;
      }

      table {
        border-collapse: collapse;
        border: 1px solid #666;
      }

      tr td {
        border: 1px solid #666;
        width: 120px;
      }
    </style>
  </head>

  <body>
    <div id="scroll-div1">
      <table id="table1"></table>
    </div>
    <script>
      var timer;
      $(function() {
        initTable("table1", 60, 14);

        timer = setInterval(function() {
          autoscroll("scroll-div1", 1);//这里 1 调整为 td 高度时效果如第二个表格
        }, 10);
      });

      function initTable(eleId, row, col) {
        var $table = $(`#${eleId}`);
        for (let i = 0; i < row; i++) {
          let $tr = $(`<tr></tr>`);
          for (let j = 0; j < col; j++) {
            let $td = $(`<td>Rows-${i}  Columns-${j}</td>`);
            $tr.append($td);
          }
          $table.append($tr);
        }
      }

      function autoscroll(eleId, speed) {
        const ele = $(`#${eleId}`);
        ele.scrollTop(ele.scrollTop() + speed);
        if (ele.scrollTop() + ele.height() >= ele.get(0).scrollHeight) {
          ele.scrollTop(0);
          //clearInterval(timer);
        }
      }
    </script>
  </body>
</html>

上面大多代码用来构造表格，实际上核心代码只有几行

$(function() {
     setInterval(function() {
          const ele = $('#table1');
          ele.scrollTop(ele.scrollTop() + 1);
          if (ele.scrollTop() + ele.height() >= ele.get(0).scrollHeight) {
              ele.scrollTop(0);
          }
    }, 10);
});

◣NSD◥

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JQuery】table 表格自动滚动的两种效果

动态效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta h...
复制链接

扫一扫