javascript - 按下按钮后显示行

Question

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

Answer 1

请参阅此jsFiddle示例。

JavaScript 部分，带有 jQ​​uery：

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