我预先加载了一个表格的所有行。但是,我只想显示在<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 行时,“查看更少”按钮才可见。