如何使用jQuery在单击按钮时显示表格的5行更多。

Question

如何使用jQuery在单击按钮时显示表格的5行更多。

10

我预先加载了一个表格的所有行。但是，我只想显示在<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();          
});

上面代码的问题在于：

它只查找带有 <tbody> 标签的 <tr>。
“查看更少”按钮需要从底部向上移除 10 行，而不是所有行。
如果已经显示了所有记录，则需要隐藏“查看更多记录”按钮。
如果显示的最小行已经达到，则隐藏“查看更少记录”按钮。

最终，我的脚本将默认显示 10 行，如果用户点击“查看更多”，则会显示另外 10 行。所以每次增加 10 行，一旦达到最大值，则隐藏“查看更多”按钮。仅当显示的行数超过 10 行时，“查看更少”按钮才可见。

- Mike

2个回答

0

1) 如果你需要的 tr 标签不仅限于 tbody 标签，则重写你的 jQuery 选择器为：

$("#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();
}

- Zoltan Kochan

我实际上只想显示/隐藏tbody中的tr，而不是所有的tr。 - Mike

在这种情况下，问题1）不是问题，您的选择器是正确的。 - Zoltan Kochan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Keeper · Accepted Answer

您可以使用选择器$("#internalActivities tr")，它将选择所有的<tr>，无论是否有<tbody>
您需要将当前显示的索引保存在一个单独的变量中，或者根据选择了多少个元素来计算当前索引（使用.length属性）
检查当前显示的元素数量，并显示/隐藏相应的按钮。

示例

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示例。