在表中仅显示有限数量的行

Question

我试图限制显示的行数<table>.我需要在所提取的任何数量的记录中仅显示2行.桌子末端有一个小按钮,点击该按钮可以显示其余记录.

以下是表格外观的示例截图.

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

如何使用jQuery/JavaScript实现这一目标？

Answer 1

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

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

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

• start

  类型:整数

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

• end

  类型:整数

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