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

Question

Below is my script working fine for show more and show less. But please tell me how to show first three rows after that. I want to show the show more button.

The data is coming from foreach loop and in tabular format.
After x = 4, please tell me what to add so that it displays 3 rows of foreach. After that I want same script to work:

<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

Hope this works for you.. i made a little changes as i understand the problem.

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

</div>