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

我预加载一个包含所有行的表。 但是，我只想显示

标记内的前10行，现在只显示表中的每个

。

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

 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. 它只使用
标签查找
   。
2. 看不到的按钮需要从下往上删除10行而不是全部。
3. 如果显示所有这些按钮，我需要隐藏按钮seeMoreRecords 。
4. 如果显示最小行，则隐藏seeLessRecords按钮。

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

Answer 1

1. 您可以使用选择器$("#internalActivities tr")来选择所有

   ，无论是否

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

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

例

HTML

使用Javascript

 for (var i=0;i<21;i++) { $('#internalActivities').append('my data'); } 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 to

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