我预加载了一个表及其所有行。但是,我只想显示其中的前 10 行<tbody>
标签,现在每个<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>
tag.
- “查看较少”按钮需要从下往上删除 10 行,而不是全部。
- 我需要隐藏按钮
seeMoreRecords
如果全部显示。
- 如果显示最小行则隐藏
seeLessRecords
按钮。
最后看看我的脚本默认会显示 10 行,如果用户单击查看更多,那么您会看到另外 10 行。因此每次增量为 10,一旦达到最大值,就隐藏“查看更多”按钮。仅当显示的行数超过 10 行时,See less 才可见。
您可以使用选择器$("#internalActivities tr")
这将选择所有<tr>
的,无论a<tbody>
or not
您需要将当前显示的索引保存在单独的变量中,或者根据选择的元素数量计算当前索引(使用.length
财产)
检查当前显示的元素数量并显示/隐藏相应的按钮。
Example
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 演示看看它的实际效果。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)