तालिका पंक्तियां

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(); 

आप सेट 'दृश्य' शुरू में से

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

10 होने के लिए तो $(‘tr:gt(10)’) एक खाली सरणी लौटने के बाद से यह 12 वीं में से एक से <tr> टैग को चुन रही है जाएगा और आपके पास केवल 11 वां तत्व है। इसे ठीक करने के, मैं तुम्हें

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

बदलने

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

को यह समस्या $(“:gt(index)”) चयनकर्ता के कारण होता है सलाह देते हैं। यह एक सीएसएस चयनकर्ता की तरह दिखता है, जो 1 से गिनती शुरू करता है। लेकिन यह वास्तव में एक jQuery चयनकर्ता है, जो 0. से गिनती शुरू करता है। मुझे उम्मीद है कि यह मदद कर सकता है। सौभाग्य।

Answer 2

ऐसा इसलिए है क्योंकि जावास्क्रिप्ट सरणी शून्य सूचकांक आधारित हैं। सरणी में पहला आइटम इंडेक्स 0 है। .length आपको सरणी में आइटमों की संख्या देगा लेकिन यह संख्या सबसे पहले इंडेक्स से 1 गुना अधिक है क्योंकि मुझे पहले 0 है। मुझे उम्मीद है कि यह समझ में आता है।

visible परिवर्तनीय को घटाकर बदलने का प्रयास करें।

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), जो सरणी में दूसरा आइटम लौटाएगा।