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

Question

我有一个包含将近 100 行的表格，我通过将一个类添加到 tr 中作为 visible 并通过类 hidden< 隐藏其余行来默认显示 20 行/强>

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

我添加了一个 Add More 按钮，每次单击按钮时显示 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 行隐藏，而是通过将类更改为可见来显示所有行/p>

Answer 1

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

Example Here

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