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

Question

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

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

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

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

Answer 1

从tr中选择tbody个元素，然后使用slice方法选择一系列元素：

$("table > tbody > tr").hide().slice(0, 2).show();

演示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

---

  

.slice( start [, end ] )

     

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

     

  

• start

       

  类型：整数

       

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

  

• end

       

  类型：整数

       

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

  

Answer 2

您可以使用:gt选择器定位索引大于2的其他行，然后隐藏它们：

$('table tr:gt(1)').hide();// :gt selector has 0 based index

Answer 3

这是我的方法：

<script>
        $(document).ready(function () {
            $('table tr:gt(10)').hide();


        });
        function showAllRows() {
            $('table tr').show();
        }

    </script>

然后显示全部按钮：

<button onclick="showAllRows()">Show all</button>