表格行按鈕顯示

Question

我需要您的建議與我的代碼。 首先，我會告訴代碼：

$('tr:gt(9)').hide(); 
 
$('button.btn-primary').on('click', function() { 
 
    var visible = $('tr:visible').length; 
 
    $('tr:gt('+visible+')').slice(0,5).show(); 
 
})

<table class="table table-striped table-bordered"> 
 
      <thead> 
 
       <tr> 
 
       <th>Producent</th> 
 
       <th>Produkt</th> 
 
       <th>Foto</th> 
 
       <th>Typ</th> 
 
       <th>Cena netto</th> 
 
       <th>Cena brutto</th> 
 
       <th>Interface</th> 
 
       <th>Ilość dysków</th> 
 
       <th>Pojemność</th> 
 
       <th>RAID</th> 
 
       <th>Wydajność</th> 
 
       <th>Opis</th> 
 
       <th>Specyfikacja</th> 
 
       <th>Zakup</th> 
 
       </tr> 
 
      </thead> 
 
    
 
      <tbody class="results"> 
 
      <tr><td>G-Tech</td><td>vcxv</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>50.00</td><td>70.00</td><td>USB 3.0</td><td>5</td><td>400</td><td>5*5*</td><td>500</td><td>dsadsad</td><td style='display:none;'>1</td><td><a href=http://www.o2.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='34' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td style='display:none;'>2</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='36' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>LaCie</td><td>dsad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>Thunderbolt</td><td>8</td><td>400</td><td>8/8/8</td><td>500</td><td>fasdf</td><td style='display:none;'>2</td><td><a href=http://fsdfsdf target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='37' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>mLogic</td><td>test</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>80.00</td><td>100.00</td><td>Thunderbolt</td><td>8</td><td>900</td><td>5/8/8</td><td>600</td><td>fsdfd</td><td style='display:none;'>1</td><td><a href=http://fsdfds target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='38' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>Zdjęcie</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>4564.00</td><td>999999.99</td><td>Thunderbolt</td><td>4</td><td>5</td><td>1</td><td>300</td><td>SPrawdzam czy działaja fotki .... .... .. .. .. .</td><td style='display:none;'>1</td><td><a href=http://feasd target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='39' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>g</td><td><img src="admin/forms/temp/rc.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>45.00</td><td>5.00</td><td>Thunderbolt</td><td>12</td><td>1</td><td>1</td><td>l</td><td>l</td><td style='display:none;'>1</td><td><a href=http://l target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='40' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='43' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='44' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>G-Tech</td><td>Tesciowa</td><td><img src="admin/forms/temp/babcia xd.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>NAS Network Attached Storage</td><td>1.00</td><td>3.00</td><td>LAN</td><td>4</td><td>45</td><td>45</td><td>45</td><td>Chciałbym pozbyć się teściowej. Wredna babka ciągle ma jakieś problemy. </td><td style='display:none;'>2</td><td><a href=http://69 target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='45' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td style='display:none;'>2</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='49' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr>   </tbody> 
 
      </table> 
 
    <button type="button" class="btn btn-primary btn-md"> 
 
    Pokaż więcej 
 
</button>

Fiddle

工作原理：

加載頁面=顯示10 <tr>秒。當用戶點擊按鈕（底部）時，它會顯示10多行，但從不顯示最後一行。你知道我爲什麼和我該怎麼處理這個問題？當9變爲4時，所有作品。爲什麼？

Answer 1

您的代碼

var visible = $('tr:visible').length; 
    $('tr:gt('+visible+')').slice(0,5).show(); 

你設置了「看得見」最初是10由

$('tr:gt(9)').hide(); 

所以，因爲它是從12日一個選擇<tr>標籤$(‘tr:gt(10)’)將返回一個空數組和你只有第11個元素。 爲了解決這個問題，我建議你改變

var visible = $('tr:visible').length; 

到

var visible = $('tr:visible').length - 1; 

此問題是由$(「:gt(index)」)選擇造成的。它看起來像一個css選擇器，從1開始計數。但它實際上是一個jQuery選擇器，從0開始計數。 我希望這可以提供幫助。祝你好運。

Answer 2

這是因爲javascript數組是基於零索引的。意思是數組中的第一項是索引0. .length會給你數組中的項目數，但是這個數字比從第一個數字0開始的最大索引大1。我希望這是有道理的。

嘗試將visible變量更改爲負1。

var visible = $('tr:visible').length - 1; 

爲了說明：

$('tr:visible') 

將返回一個數組作爲這樣

[ 
    <tr>...</tr>, // index 0 
    <tr>...</tr>, // index 1 
    <tr>...</tr>, // index 2 
    <tr>...</tr> // index 3 
] 

數組的長度爲4，但最大的指數是3。

然後jQuery中的:gt()基於index而不是項目編號。所以，如果我想要項目編號2，我會使用索引1，：gt（1），這將返回數組中的第二個項目。