jquery - 如何使用 jQuery 在单击按钮时再显示 5 行表格

Question

我预加载了一个包含所有行的表。但是，我只想显示<tbody>标签内的前 10 行，现在<tr>是表中的每一行。

所以这是我到目前为止所做的：

var trs =  $("#internalActivities > table > tbody > tr");
trs.hide();
trs.slice(0, 9).show(); 

$("#seeMoreRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr:hidden").slice(0, 10).show();          
});

$("#seeLessRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(9, 19).hide();          
});

上面代码的问题是：

1. 它确实寻找<tr>带有<tbody>标签的唯一。
2. 少看按钮需要从下往上删除 10 行，而不是全部。
3. seeMoreRecords如果显示所有按钮，我需要隐藏按钮。
4. 如果显示最小行，则隐藏seeLessRecords按钮。

最后看看我的脚本将默认显示 10 行，如果用户点击查看更多，那么你会看到更多 10 行。所以它一次增加 10，一旦你点击 max 然后隐藏查看更多按钮。仅当显示的行数超过 10 时，才能看到“少见”。

Answer 1

1. 您可以使用$("#internalActivities tr")将选择所有的选择器<tr>，无论<tbody>是否

2. 您需要将当前显示的索引保存在单独的变量中，或者根据选择的元素数量计算当前索引（使用.length属性）

3. 检查当前显示元素的数量并显示/隐藏相应的按钮。

例子

HTML

<table id="internalActivities">

</table>
<input type="button" id="seeMoreRecords" value="More">
<input type="button" id="seeLessRecords" value="Less">

Javascript

for (var i=0;i<21;i++) {
    $('#internalActivities').append('<tr><td>my data</td></tr>');
}

var trs = $("#internalActivities tr");
var btnMore = $("#seeMoreRecords");
var btnLess = $("#seeLessRecords");
var trsLength = trs.length;
var currentIndex = 10;

trs.hide();
trs.slice(0, 10).show(); 
checkButton();

btnMore.click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(currentIndex, currentIndex + 10).show();
    currentIndex += 10;
    checkButton();
});

btnLess.click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(currentIndex - 10, currentIndex).hide();          
    currentIndex -= 10;
    checkButton();
});

function checkButton() {
    var currentLength = $("#internalActivities tr:visible").length;

    if (currentLength >= trsLength) {
        btnMore.hide();            
    } else {
        btnMore.show();   
    }

    if (trsLength > 10 && currentLength > 10) {
        btnLess.show();
    } else {
        btnLess.hide();
    }

}

我创建了一个jsFiddle 演示来查看它的实际效果。

Answer 2

1）如果您不仅需要带有 tbody 标签的 tr 标签，那么将您的 jquery select 重写为

$("#internalActivities > table tr");

2）您可以获得行数并在切片中使用该计数

var $records = $("#internalActivities tr");
$records.slice($records.length - 10, $records.length).hide();

3) 检查 seeMoreRecords 点击事件处理程序中隐藏行的计数

if ($("#internalActivities tr:hidden").length === 0) {
    $("#seeMoreRecords").hide();
}

4）检查显示的行数

if ($("#internalActivities tr").not(":hidden").length <= 10) {
    $("#seeLessRecords").hide();
}