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

Changing hidden to visible state of Table > TR on click

本文关键字：状态 gt TR 点击 隐藏      更新时间：2023-09-26

我有一个几乎有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

来显示所有行

您可以使用选择器$('#ranking-table tr.hidden:lt(5)')来选择类为.hidden的前5个tr元素。它利用了CCD_ 4。

此处示例

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