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>

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

1 个答案: