2019-06-04 JavaScript 实现表头不动，表内容循环滚动

最新推荐文章于 2023-03-13 16:53:25 发布
最新推荐文章于 2023-03-13 16:53:25 发布
阅读量274 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LHS__BRU_745/article/details/101475543
版权
2363252-6c1ef11146481d64.gif
Scroll动态图展示滚动效果


<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript"> 

        $.fn.infiniteScrollUp = function () {

            var self = this, kids = self.children()

            kids.slice(20).hide();

            setInterval(function () {

                kids.filter(':hidden').eq(0).fadeIn();

                kids.eq(0).fadeOut(function () {

                    $(this).appendTo(self)

                    kids = self.children();

                });

            }, 1500);

            return this

        }

        $(function () {

            $('tbody').infiniteScrollUp();

        }) 

    </script>

    <title>infiniteScrollUp</title>

</head>

<body>

    <table border="1" width="400">

        <colgroup>

            <col />

            <col />

            <col />

            <col />

            <col />

            <col />

        </colgroup>

        <thead>

            <tr>

                <th>a</th>

                <th>b</th>

                <th>c</th>

                <th>d</th>

                <th>e</th>

                <th>f</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1a</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1b</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1c</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1d</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1e</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1f</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1g</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1h</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1i</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1j</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1k</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1l</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1m</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1n</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1o</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1p</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1q</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1r</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1s</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1t</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1u</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1v</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1w</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1x</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1y</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>1z</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

转自：https://sheng.iteye.com/blog/1850184

雨笋情缘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用JS实现表格宽度任意竖轴滚动时表头固定
qq_32109661的博客
12-30 664
前言： 在实际项目开发中遇到类似需求，本来想当然地用**table-layout** ，但是这个属性并不能很好的应用在任意宽度的表格上。至于其他解决方案就是给td手动设置固定宽度，这种方法并不具有通用性，但是给我提供了一个思路，自动计算并设置表格宽度就可以很好地实现想要的效果。 DOM结构 <div class="table_area"> <div class="table_head"> <table> <tr>
html table 表头不动,js实现表头不动，表格内容无限循环滚动
weixin_34335039的博客
06-17 1205
表头不动，只有内容无限循环滚动，代码如下：html部分：组织排名组织名称组织积分css部分：.table{width: 100%;}.content {width: 434px;height: 182px;outline: 1px solid #e5e5e5;overflow: hidden;}.data-content tr:nth-child(odd){background-color: #f...
js实现表头不动，表格内容无限循环滚动
qq_42975998的博客
03-06 6329
表头不动，只有内容无限循环滚动，代码如下： html部分： &lt;div class="content"&gt; &lt;div class="header"&gt; &lt;div&gt;组织排名&lt;/div&gt; &lt;div&gt;组织名称&lt;/div&gt; &lt;div&gt;
HTML+JS实现列表循环滚动信息展示
Start_Simple的博客
03-13 1949
列表循环滚动信息展示
原生js实现列表自动滚动循环播放
HuangsTing的博客
08-03 5727
1.实现效果图 鼠标移入，暂停滚动； 鼠标移出，继续滚动； 2.实现代码 原理及注意点： 1.要实现无缝衔接，在原有ul后面还要有一个一样内容的ul； 2.最外层div为可视区域，设overflow：hidden； 3.2个ul的高度 > 外层可视div高度，才能滚动； html： <!-- vue --> <div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)"> <ul id
js实现table表头冻结（scroll时固定）
zp19860529的博客
08-14 2630
方案一： 思路：当table在父容器中滑动滚动条显示内容时，使用scrollTop判断边界，同时使用JQuery中的clone方法，把原table创建复制一份，插入到动态创建的一个div中，再将该div的position设置为fixed,height设置table中的thread的高度即可。 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
BootStrap Table 设置height表头与内容无法对齐的问题
08-31
表头通常被固定在顶部以便滚动查看长表格，而内容部分则随着数据的加载和滚动进行更新。当高度被固定后，由于内部结构的变化，原有的对齐方式可能失效。 问题的根源在于Bootstrap Table的固定表头（fixed-table-...
表格表头固定 内容可以滚动（示例）
12-21
### 表格表头固定，内容可以滚动的技术实现 在网页设计中，有时我们需要实现一个功能：当用户滚动表格内容时，表头始终固定显示在顶部，以便于用户查看列名，提高数据阅读效率。本篇文章将围绕这一需求展开讨论，并...
利用JS+CSS实现滚动表格数据展示
06-06
下面将详细介绍如何通过JavaScript（JS）和层叠样式表（CSS）来实现这一功能。 首先，我们需要创建一个基本的HTML结构，包含一个`<table>`元素，用于展示数据。表格通常由`<thead>`（表头）、`<tbody>`（表格主体）...
JS实现table表格内针对某列内容进行即时搜索筛选功能
10-18
JavaScript 实现的表格即时搜索筛选功能是Web开发中常见的需求，尤其在处理大量数据展示时。这个功能允许用户在输入框中输入关键字，系统实时筛选并仅显示匹配关键字的表格行，无需每次输入都向服务器发送请求，从而...
基于vuejs实现树形表格的封装vuetreetable
08-10
考虑到实际应用中的多样化需求，组件应该允许用户自定义列头、单元格内容以及节点操作，这可以通过插槽（slot）实现。 8. **优化性能**： 对于大数据量的树形表格，可以使用虚拟滚动或懒加载技术，只渲染可视区域...
js+实现+滚动的表格
08-17
js+实现+滚动的表格,可以使页面上的表格滚动
基于jQuery和colResizable-1.6.js的使表头固定内容滚动
fdhsdfgh的博客
09-20 1832
要让表头固定内容滚动，基本操作思路是将表头和内容分开成两个table，并装进两个不同的div中，再让内容的div设置滚动。但是colResizable.js在同时渲染了两个表格后，两个表格的列宽拖拽是相互独立的，并不能一起滚动，于是我们需要在插件内容上做一些修改。 这里我使用的是colResizable.js-1.6.js，需要将js文件的syncCols方法进行修改： var syncCo...
Table的思索(二):表头固定而内容滚动的表格
热门推荐
甘焕的博客
08-03 2万+
产品要求表格的表头固定，而内容在超出table的高度后，还能自由滚动，难度较高，本文尝试了几种常用方法，但都经历了失败，最后给出了一种可行的解决方案。
表格轮播效果(表头固定,内容自下而上循环滚动)
Revered_Mars的博客
08-28 4938
<div class="b_right_box" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> <h1 class="t_title">滚动表格样例</h1> <ta...
Table表头固定，内容可以滚动
weixin_30340745的博客
02-27 361
　　对于table表的操作，网上插件有很多，比如说表很长的时候出现滚动条，往下拉滚动条表头能固定，再比如说，我拖拽表头的改变列宽等等，虽然最后我用的是一个网上的插件（这个插件并不好用，迟早我会自己写一个表格的插件），但是我还是想谈一谈表头固定的方法。 　　1.首先需要把表头放在一个table里面，如下tableHead <table width="100%" border="1" i...
原生js实现：表头固定+表体每秒向上滚动一行+滚动到无数据时重新回滚到顶部+可以自定义滚动行数
weixin_43848571的博客
01-08 716
描述：原生js开发的一个表格走马灯通用组件，表格表头固定，表体内容可每秒向上滚动一行，（表格内容可通过数组动态循环渲染），表体内容滚动到最后一个时，数据回滚到顶部，重新开始 自下向上 滚动，表体内容展示单元格行数，单元格长度宽度都可以自定义。 实现效果如下： 代码如下： <body> <table> <thead> <tr> <th>ID</th> <th>姓名&lt
jquery 表格表头固定，表格滚动 ------gxy
读书探究世界的博客
03-26 2092
实现了表头固定，表身滚动： &lt;div id="scroll_table" class="col-md-12 bottom_half" &gt; &lt;table width="100%"&gt; &lt;thead&gt; &lt;tr&gt;
jquery固定表头不滚动让内容滚动的代码实现
baishuo678的专栏
12-02 1631
使用jquery的表格特效，控制表格的表头固定而不滚动，当用户拖动表格滚动条的时候，表格的每行内容是滚动的，表头并不会滚动，这样可始终让表格的表头与内容相对应，方便查看表格中的内容，对一个表格来说，我想这样的效果是非常实用哦。 jQuery固定表头表格滚动数据效果 @charset "UTF-8";body{font-family: '微软雅黑',Arial,sans-serif
列表表头固定内容首尾循环滚动
最新发布
05-21
您可以使用JavaScript和CSS来实现固定列表表头和循环滚动的效果。以下是一个简单的示例代码： HTML结构： ``` <div class="table-container"> <th>Header 1 <th>Header 2 <th>Header 3 <th>Header 4 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值