2017-02-17 75 views
1

下面是我的腳本工作正常顯示更多,並顯示較少。但請告訴我如何顯示前三行。我想要顯示更多按鈕。在php的一些記錄後顯示更多的顯示

該數據來自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> 
+1

您可以添加$( '#表TR:LT(3)')隱藏();在x = 4之前; –

+0

它不工作 – eliana

回答

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>

+0

<表ID = 「表」> \t 名稱月年評價進度條 \t <?的PHP的foreach($元件作爲$元件){?> \t ​​<?= $元件[ 'f_name']。」」。$元件[ 'l_name' ]?>​​<?= $ element ['month']?>​​<?= $ element ['year']?> \t \t \t​​<?= $元素[「進步」]> \t \t \t這是後第顯示我的表中的數據,並將其顯示越來越顯示出ATLEAST顯示2行少我第一顯示按鈕 – eliana

+0

你可以創建一個片段或小提琴嗎? –

+0

https://jsfiddle.net/te249pyc/2/ – eliana