我试图限制<table>
中显示的行数。我需要在所提取的任何数量的记录中仅显示2行。在桌子的末尾有一个小按钮,点击该按钮可以显示其余的记录。
以下是表格外观的示例截图。
我尝试搜索过SO和其他网站,但无法通过。我也不能在表中使用任何jQuery插件。
如何使用jQuery / JavaScript实现这一目标?
答案 0 :(得分:6)
从tr
中选择tbody
个元素,然后使用slice
方法选择一系列元素:
$("table > tbody > tr").hide().slice(0, 2).show();
演示:
$("table > tbody > tr").hide().slice(0, 2).show();
$(".show-all").on("click", function() {
$("tbody > tr", $(this).prev()).show();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
</tr>
</tbody>
</table>
<button class="show-all">Show all</button>
&#13;
.slice( start [, end ] )
将匹配元素集减少到由一系列索引指定的子集。
start
类型:整数
一个整数,表示开始选择元素的从0开始的位置。如果是负数,则表示距离集合末尾的偏移量。
end
类型:整数
一个整数,表示停止选择元素的从0开始的位置。如果为负,则表示距离集合末尾的偏移量。如果省略,则范围将持续到集合结束。
答案 1 :(得分:2)
您可以使用:gt
选择器定位索引大于2的其他行,然后隐藏它们:
$('table tr:gt(1)').hide();// :gt selector has 0 based index
答案 2 :(得分:0)
这是我的方法:
<script>
$(document).ready(function () {
$('table tr:gt(10)').hide();
});
function showAllRows() {
$('table tr').show();
}
</script>
然后显示全部按钮:
<button onclick="showAllRows()">Show all</button>