按下按钮后显示行

Question

我想在默认情况下显示第1行，然后当您按下“加载更多”按钮时，每次都会加载另一行。我已经在行中有内容（不需要AJAX），但我只是希望能够在按下按钮时显示它。

Answer 1

请参阅此jsFiddle示例。

JavaScript部分，使用jQuery：

$('#loadmore').click(function(){
     $('tr.hide').first().removeClass('hide').addClass('show'); 
});

Answer 2

默认情况下，对所有行使用display: none;（第1行除外）。

然后在每次点击时，在给定的行上使用.show()或：

$('BUTTON_SELECTOR').click(function(){
    $('ROWS_CONTAINER_SELECTOR:hidden:first').show();
});

Answer 3

如果您已经拥有数据，那么您只需将容器div设置为overflow: hidden并调整其大小以便每次点击都显示一个额外的行。

$("#button").click(function(){
   $("#container").css("height","+=150");
});