Show/Hide specified number of table row

Question

This is the HTML table:

<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

I would like to show a specified number of table rows (for example 5) with a Show/Hide link at the bottom.

Any help would be appreciated.

Answer 1

Try .nth-child() as shown :-

$("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

Above shown answers will hide only specified row i.e only '5th' row,if need to hide all the rows after 5th row try below answer.

DEMO

Demo with show hide option.

---

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

DEMO