在表格中仅显示有限数量的行 [英] Show only a limited number of rows in a table

问题描述

我试图限制<table>中显示的行数.无论获取多少记录，我只需要显示2行.表格末尾有一个小按钮，单击该按钮将显示其余记录.

I am trying to limit the number of rows displayed in a <table>. I need to show only 2 rows out of whatever number of records fetched. There's a small button at the end of the table, on click of which the rest of the records will get revealed.

这是表格外观的示例屏幕截图.

Here's a sample screenshot of how the table will look like.

我尝试搜索SO和其他网站，但无法通过.我也不能在表中使用任何jQuery插件.

I have tried searching over SO and other websites, but unable to get through. I can't use any jQuery plugin for table either.

如何使用jQuery/JavaScript实现此目标?

How can I achieve this using jQuery/JavaScript?

推荐答案

从tbody中选择tr个元素，然后使用slice方法选择它们的范围:

Select tr elements from tbody and use slice method to select a range of them:

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

<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>

.slice( start [, end ] )

将匹配的元素集减少为由一系列索引指定的子集.

.slice( start [, end ] )

Reduce the set of matched elements to a subset specified by a range of indices.

• start

类型:整数

一个整数，指示从0开始的位置，在该位置开始选择元素.如果为负，则表示距集合末尾的偏移量.

An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.

end

类型:整数

一个整数，指示元素从0开始的停止位置.如果为负，则表示距集合末尾的偏移量.如果省略，范围将一直持续到集合结束.

An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.

这篇关于在表格中仅显示有限数量的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！