jQuery向上滑动表行

jQuery 是一个快速、简洁的 JavaScript 框架，让 HTML 文档遍历操作更加简单。在向上滑动表行这个场景中，jQuery 可以实现以下功能：

响应式表头：通过 jQuery 的 scroll() 事件，可以实现当页面滚动到一定位置时，表头固定在视窗顶部。
页面滚动时隐藏表头：通过 jQuery 的 scrollTop() 方法，可以实现当页面向上滚动时，表头逐渐隐藏。
页面静止时显示表头：通过 jQuery 的 window.scroll() 方法，可以实现当页面静止时（不再滚动），表头显示出来。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 向上滑动表行示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th, .table td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div style="height: 500px; overflow-y: scroll;">
        <table class="table" id="myTable">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
            </tr>
        </table>
    </div>
    <script>
        $(document).ready(function () {
            $('#myTable').scroll(function () {
                if ($(this).scrollTop() >= 100) {
                    $('.table').addClass('fixed');
                } else {
                    $('.table').removeClass('fixed');
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，我们使用 jQuery 的 scroll() 事件监听页面滚动，当页面滚动到一定位置（100像素）时，通过 addClass() 方法为表头添加一个 fixed 类，使表头固定在视窗顶部。当页面不再滚动时，通过 removeClass() 方法将表头从 fixed 类中移除，使表头不再固定。

页面内容是否对你有帮助？

有帮助

没帮助

向下滑动表行onclick并显示内容

javascript

我有与每个表行相关联的元数据，当我单击任何表行时，我希望向下滑动该行并显示该行的元数据，然后向上滑动以关闭该行。I have tried using jquery slideToggle() but it display the metadata outside the table <div id="rowMetaData">Pop

浏览 17提问于2019-07-06得票数 0

1回答

带有jquery动画的Twitter引导表

jquery、html、twitter-bootstrap、twitter-bootstrap-3、html-table

td> </td> </tbody>如何使用jquery

浏览 3提问于2013-10-31得票数 2

回答已采纳

1回答

表行和删除上的jQuery slideUp

jquery、jquery-effects

我正在尝试使用jQuery从表中删除特定的行，但我想使用slideUp效果，这样行就会向上滑动，然后自动删除。我尝试了下面的方法，但它似乎不尊重效果。它就会自行移除。但在移除之前，它不会向上滑动。我做错了什么？

浏览 19提问于2016-07-13得票数 0

回答已采纳

1回答

为表行实现向下滑动

javascript、jquery

我正在尝试使用上一篇文章中的实现表行的向下滑动 $("#table_rolecart tbody&qu

浏览 0提问于2011-12-21得票数 1

回答已采纳

3回答

jQuery -向上滑动/编辑html /向下滑动

jquery、ajax、effects

我正在尝试向上滑动包含一个表的div，使用ajax调用更改表的行，然后向下滑动包含表。我似乎不能让这一系列的回调有效地工作。.slideDown('fast'); // want this to wait until editrow() has been run on each row editrow()包含用于编辑给定行的问题是div向上滑动，然后立即向下滑动</e

浏览 2提问于2009-08-19得票数 2

回答已采纳

2回答

移动设备上的jQuery插件tableDnD

jquery、tablednd

我正在一些包含jQuery表的网页上成功地使用tableDnD插件。有谁能解决这个问题吗？

浏览 8提问于2022-07-20得票数 0

3回答

我刚刚开始学习jquery，我花了很长时间浏览jquery api站点才创建了这几行代码。我想做的是使用ajax从另一个页面加载内容，并将其放入现有的div中。目前，代码工作正常，但当我点击一个链接时，所有步骤都会一次性执行，所以它在#content div向上滑动时执行load()函数…… 我想要做的是一步一步地处理每一行，所以在一行结束后，下一行开始(例如#content div向上滑动，然后#content中的东西被删除，但目前

浏览 1提问于2010-01-30得票数 4

1回答

元素不会在特定宽度的视口上使用slideDown()

javascript、jquery、width、slidedown、slideup

("fast");.toggle-content {}<a href="#" class="footer-toggle">TITLE 1<&

浏览 6提问于2017-11-28得票数 0

1回答

Admobs在iphone中滚动

iphone

你好，我在iphone中使用admobs sdk。我只想在主视图中显示广告。我以编程方式应用了UItableview，并在此视图中使用了AdmobView。我的问题是，广告是用屏幕/桌面视图滚动的，广告是重叠的表格单元格，我应该如何将广告的位置固定在底部，使其不能与表格一起滚动。

浏览 3提问于2011-03-02得票数 1

回答已采纳

1回答

数据表行向上滑动

jquery、datatables、slidetoggle

有没有人遇到数据表行向上滑动的问题。我可以让行向下滑动，但每次我单击按钮关闭该行时，它只会创建额外的行。我试过使用切换方法，但还是增加了一行，我试着往上滑，只用了tblIndsutry的td.control，它仍然只增加了一行。

浏览 2提问于2013-11-04得票数 0

1回答

jquery动画UL / li

jquery、html-lists、slide、animated

寻找简单的脚本来动画我的UL喜欢在这个网站(幻灯片，向上老李，向下新李) 我试过了：

浏览 0提问于2012-09-03得票数 0

1回答

单击b后，jQuery* .load反应缓慢*

jquery、ajax、wordpress

>/contact/">contact</a></li> </nav>$(function () { $.getScript("http://www.mydomain.co.uk/pathtofoler/wp-content&#

浏览 0提问于2013-03-07得票数 3

1回答

使用动画上下滑动桌子

javascript、jquery、animation

我想用动画关闭/打开一个表。为此，我尝试使用jQuery，结果发现jquery不能对表执行向上/向下滑动。当然，我可以使用.wrap()将表封闭在div中，但它很笨拙，有时还会给我带来错误还有没有别的选择？此外，jquery动画并不流畅；如何像在中那样实现流畅的动画

浏览 0提问于2012-08-07得票数 1

2回答

子菜单向上滑动，如果它已经被选中，则返回菜单(bug)

jquery、html、drop-down-menu、accordion、submenu

你好，我的jQuery垂直手风琴样式菜单有问题。我怎样才能防止这种情况发生呢？相反，如果子菜单已经关闭，我希

浏览 4提问于2015-08-16得票数 1

回答已采纳

2回答

单击链接时停止SlideUp

javascript、jquery、slidetoggle

因此，我有一个垂直菜单，当您单击父项以显示子元素时，该菜单向下滑动，当您单击子元素时，它将带您到链接。我的问题是，当您单击链接时，整个子菜单就会因为上面的slideToggle函数而滑动--如果单击链接，我如何才能阻止幻灯片上升？('#menu-top').children().click(function(e){ var $child =('.active-menu');

浏览 3提问于2013-12-17得票数 0

回答已采纳

1回答

如何让slideUp()在表行上按预期工作？

javascript、html、jquery、css、jquery-slide-effects

Cell Contents</td> </tr></table> 使用JavaScript/jQuery，我想使用slideUp() jQuery动画在单击表行中的delete按钮后隐藏该行。但是，表行上不会播放任何动画(请参

浏览 3提问于2021-04-04得票数 0

2回答

mootools FX.slideOut折叠表格行

javascript、mootools、mootools-fx

当我在表行上使用Mootools FX.slide时，它会先水平折叠该行，然后再向上滑动，这并不是预期的效果。如果你想看一下，这里有一把小提琴-- 谢谢!

浏览 5提问于2011-12-21得票数 0

回答已采纳

2回答

使用jQuery修复html表的部分

javascript、jquery、html、css

我有一个HTML表，它是从服务器获取的数据中动态填充的。由于我不知道模式或手边的行数，所以我将其及其行的&单元格的位置定义为相对的。现在，一旦表被填充，我想从它中删除一组行(由一个行索引数组指定)。我正在为这些行删除尝试下面的动画。应该删除的行会淡出，在表中留下空白。->其他行向上滑动，以填充在它们之间创建的空间。使用jquery简单地淡出或滑动</e

浏览 2提问于2015-09-16得票数 1

4回答