在php的一些记录后显示更多的显示

Question

下面是我的脚本工作正常显示更多，并显示较少。但请告诉我如何显示前三行。我想要显示更多按钮。

该数据来自foreach循环和表格格式。
x = 4后，请告诉我要添加什么，以便它显示3行foreach。之后，我想要相同的脚本工作：

<script> 
    $(document).ready(function() { 
     x = 4; 

     size_li = $("#Table td").size(); 

     //$('#Table tr').show(x); 
     $('#td td:lt('+x+')').show(); 
     $('#loadMore').click(function() { 
      x= (x+5 <= size_li) ? x+4 : size_li; 
      $('#Table td:lt('+x+')').show(); 
     }); 
     $('#showLess').click(function() { 
      x=(x-5<0) ? 5 : x-4; 
      $('#Table td').not(':lt('+x+')').hide(); 
     }); 
    }); 
</script> 

Answer 1

希望这适用于你..我做了一点改变，因为我了解问题。

$(document).ready(function() { 
 
    
 
    
 
    
 
var table = $('#Table'); 
 
for(i=0; i<8; i++){ 
 
    var row = $('<tr></tr>').addClass('bar').text('result ' + i); 
 
    table.append(row); 
 
} 
 

 
table.find('tr:gt(2)').hide(); 
 
    
 
x=3; 
 

 
var size_li = table.find("tr").size(); 
 
     
 
     $('tr:lt('+x+')').show(); 
 
     $('#loadMore').click(function() { 
 
      x= (x+5 <= size_li) ? x+4 : size_li; 
 
      $('#Table tr:lt('+x+')').show(); 
 
     }); 
 
     $('#showLess').click(function() { 
 
      x=(x-5<0) ? 5 : x-4; 
 
      $('#Table tr').not(':lt('+x+')').hide(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="Table"> 
 

 
</table> 
 

 
<button id="loadMore">more</button> 
 

 
<button id="showLess">less</button>