javascript - 表格行显示按钮

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> s。当用户单击按钮(底部)时，它会再显示 10 行但不会最后显示。你知道为什么以及我与那个问题有什么关系吗？当 9 变为 4 时，一切正常。为什么？

Answer 1

你的代码

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

您将“可见”最初设置为 10

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

所以 $(‘tr:gt(10)’)将返回一个空数组，因为它正在选择 <tr>第 12 个标签，你只有第 11 个元素。 要解决此问题，我建议您更改

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

到

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

此问题是由 $(“:gt(index)”) 引起的选择器。它看起来像一个css选择器，从1开始计数。但它实际上是一个jQuery选择器，从0开始计数。 我希望这能有所帮助。祝你好运。