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

时间:2014-10-27 08:04:50

标签: javascript jquery

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

以下是表格外观的示例截图。 enter image description here

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

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

3 个答案:

答案 0 :(得分:6)

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开始的位置。如果为负,则表示距离集合末尾的偏移量。如果省略,则范围将持续到集合结束。

  •   

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