大佬教程收集整理的这篇文章主要介绍了如何使用jQuery在单击按钮上显示另外5行表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
所以这就是我到目前为止所做的：
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.
例
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以查看此操作.
以上是大佬教程为你收集整理的如何使用jQuery在单击按钮上显示另外5行表全部内容，希望文章能够帮你解决如何使用jQuery在单击按钮上显示另外5行表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。