单击时将表> TR的隐藏状态更改为可见状态

努曼·纳齐(Nouman Niazi)

我有一个表,几乎是100行,我加入了类的TR作为显示20默认可见由类和隐藏行的其余部分隐藏

<tbody>
    <tr class="visible"></tr>
    <tr class="visible"></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
    <tr class="hidden"></tr>
</tbody>

我添加了一个“添加更多”按钮,每次单击该按钮时将显示5行,但是我的jQuery逻辑完全错误,请看一下

$(".more-show").click(function (e)  {
    e.preventDefault();
    for (var i = 0; i<5; i++) {
        $('#ranking-table tr').each(function(i) {
            $(this).removeClass("hidden").addClass("visible");
        });
    }
});

问题

不必每次单击都显示5行,而必须是最前面的5个隐藏行,而是通过将类更改为visible来显示所有行

乔什·克罗齐耶(Josh Crozier)

您可以使用选择器$('#ranking-table tr.hidden:lt(5)')选择trclass的前5个元素.hidden它使用:lt(5)

这里的例子

$(".more-show").click(function (e)  {
    e.preventDefault();
    $('#ranking-table tr.hidden:lt(5)').each(function(i) {
        $(this).removeClass("hidden").addClass("visible");
    });
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当鼠标悬停在div上时,使其保持可见状态

来自分类Dev

jQuery:在元素处于可见状态时触发动作

来自分类Dev

将显示设置为可见状态后,元素动画是否运行?

来自分类Dev

仅在第二个div处于可见状态时,滚动时保持div可见

来自分类Dev

仅根据名称更改 DataGridView 的可见状态

来自分类Dev

HTML SVG如何在鼠标悬停时将元素更改为可见/隐藏?

来自分类Dev

单击按钮时,网页源中的链接是否可能不可见/隐藏,但该链接处于活动状态?

来自分类Dev

设置状态时不隐藏可见性小部件

来自分类Dev

在 Vue 中,单击时将多个按钮之一更改为活动状态

来自分类Dev

根据复选框状态将子表单隐藏字段设置为可见

来自分类Dev

jQuery:根据表的可见性状态更改按钮的文本

来自分类Dev

当通话状态栏可见时,UIButton的点击区域会更改

来自分类Dev

更改筛选器上的Asp.Net RadListBoxItem可见状态

来自分类Dev

使元素可见并在单击时隐藏

来自分类Dev

每次单击时将文本更改为

来自分类Dev

如何使Windows 10屏幕键盘保持可见状态?

来自分类Dev

UNIX:如何将所有隐藏的文件夹/文件更改为在目录中可见

来自分类Dev

将按钮的状态更改为已按下

来自分类Dev

将状态栏更改为白色

来自分类Dev

从子状态更改为父状态时如何调用onEnter?

来自分类Dev

状态更改为媒体结尾时,QMediaPlayer状态未停止

来自分类Dev

将线框更改为false后,面不可见

来自分类Dev

将每个可见的 src 更改为它的数据属性

来自分类Dev

片段处于活动状态/可见时进行回调

来自分类Dev

不处于编辑状态时,块预览不可见

来自分类Dev

当全屏显示视频播放器控件(可见)时,状态栏将返回(可见)

来自分类Dev

当全屏显示视频播放器的控件(可见)时,状态栏将返回(可见)

来自分类Dev

单击<td>时获取表<tr>

来自分类Dev

将FrameLayout设置为在单击按钮时可见

Related 相关文章

  1. 1

    当鼠标悬停在div上时,使其保持可见状态

  2. 2

    jQuery:在元素处于可见状态时触发动作

  3. 3

    将显示设置为可见状态后,元素动画是否运行?

  4. 4

    仅在第二个div处于可见状态时,滚动时保持div可见

  5. 5

    仅根据名称更改 DataGridView 的可见状态

  6. 6

    HTML SVG如何在鼠标悬停时将元素更改为可见/隐藏?

  7. 7

    单击按钮时,网页源中的链接是否可能不可见/隐藏,但该链接处于活动状态?

  8. 8

    设置状态时不隐藏可见性小部件

  9. 9

    在 Vue 中,单击时将多个按钮之一更改为活动状态

  10. 10

    根据复选框状态将子表单隐藏字段设置为可见

  11. 11

    jQuery:根据表的可见性状态更改按钮的文本

  12. 12

    当通话状态栏可见时,UIButton的点击区域会更改

  13. 13

    更改筛选器上的Asp.Net RadListBoxItem可见状态

  14. 14

    使元素可见并在单击时隐藏

  15. 15

    每次单击时将文本更改为

  16. 16

    如何使Windows 10屏幕键盘保持可见状态?

  17. 17

    UNIX:如何将所有隐藏的文件夹/文件更改为在目录中可见

  18. 18

    将按钮的状态更改为已按下

  19. 19

    将状态栏更改为白色

  20. 20

    从子状态更改为父状态时如何调用onEnter?

  21. 21

    状态更改为媒体结尾时,QMediaPlayer状态未停止

  22. 22

    将线框更改为false后,面不可见

  23. 23

    将每个可见的 src 更改为它的数据属性

  24. 24

    片段处于活动状态/可见时进行回调

  25. 25

    不处于编辑状态时,块预览不可见

  26. 26

    当全屏显示视频播放器控件(可见)时,状态栏将返回(可见)

  27. 27

    当全屏显示视频播放器的控件(可见)时,状态栏将返回(可见)

  28. 28

    单击<td>时获取表<tr>

  29. 29

    将FrameLayout设置为在单击按钮时可见

热门标签

归档