Question

这是HTML表：

<table>
    <tbody>
        <tr>
            <th style="border-bottom:1px solid #EB8D01;font-size: 12px;font-weight: bold;font-family: verdana, helvetica, sans-serif;padding-bottom: 2px;"><a href="0/posts/10-Auto/">Auto</a> <span class="count">(1)</span> </th>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/17-Cars/">Cars</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/18-Car-Accessories/">Car Accessories</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/20-Car-Cleaning-Detailing/">Car Cleaning &amp; Detailing</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/24-Car-Audio/">Car Audio</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/29-Motorcycles/">Motorcycles</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/35-Other-Commercial-Vehicles/">Other Commercial Vehicles</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/39-Driving-Schools/">Driving Schools</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/41-Service-repairs/">Service &amp; repairs</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/42-Spare-parts/">Spare parts</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/43-Transport-Services/">Transport Services</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/393-Boats-Jet-Skis/">Boats &amp; Jet Skis</a><br></td>
        </tr>
    </tbody>
</table>

JSFiddle

我想在底部显示指定数量的表行（例如5），显示/隐藏链接。

任何帮助都将不胜感激。

Answer 1

尝试.nth-child()，如下所示： -

$("table tr:nth-child(5)").hide(); //in '.nth-child()' count starts from 1

OR

$("table").find('tr').eq(4).hide();  // in '.eq()' count starts from 0

上面显示的答案将只隐藏指定的行，即只隐藏'5th'行，如果需要隐藏5th行后面的所有行，请尝试下面的答案。

DEMO

Demo with show hide option.

$("table tr:gt(5)").hide();

DEMO

Answer 2

你可以使用这样的东西，像这样改变你的HTML：

<a href="#">Show / Hide All</a>
<table>
    <tbody>
        <tr>
            <th style="border-bottom:1px solid #EB8D01;font-size: 12px;font-weight: bold;font-family: verdana, helvetica, sans-serif;padding-bottom: 2px;">
                <a href="0/posts/10-Auto/">Auto</a> <span class="count">(1)</span>
            </th>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/17-Cars/">Cars</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/18-Car-Accessories/">Car Accessories</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/20-Car-Cleaning-Detailing/">Car Cleaning &amp; Detailing</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/24-Car-Audio/">Car Audio</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/29-Motorcycles/">Motorcycles</a><br></td>
        </tr>
    </tbody>
    <tbody class="more hidden">
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/35-Other-Commercial-Vehicles/">Other Commercial Vehicles</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/39-Driving-Schools/">Driving Schools</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/41-Service-repairs/">Service &amp; repairs</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/42-Spare-parts/">Spare parts</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/43-Transport-Services/">Transport Services</a><br></td>
        </tr>
        <tr>
            <td style="padding: 2px;border-bottom: 1px solid #F4F4F4;"><a href="0/posts/10-Auto/393-Boats-Jet-Skis/">Boats &amp; Jet Skis</a><br></td>
        </tr>
    </tbody>
</table>

这是jQuery：

$(document).ready(function(){
    $("a").click(function(){
        $(".more").toggleClass("hidden");
        return false;
    });
});

显示/隐藏指定的表行数

2 个答案:

小提琴：http://jsfiddle.net/praveenscience/rkss956e/