如何使用jQuery在单击按钮上显示另外5行表

我预加载一个包含所有行的表.但是,我只想显示< 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();          
});

上面代码的问题是：

>它确实寻找< tr>只有< tbody>标签.
>看不到的按钮需要从下往上删除10行而不是全部.
>如果显示所有这些按钮,我需要隐藏按钮seeMoreRecords.
>如果显示最小行,则隐藏seeLessRecords按钮.

最后看我的脚本默认显示10行,如果用户点击查看更多,那么你会看到10行.所以它一次增加10,一旦你达到最大值,然后隐藏看到更多按钮.仅当显示的行超过10行时才能看到less.

解决方法

>您可以使用选择器$(“#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 demo以查看此操作.