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.

There is a reason it gives a warning that links to JS fiddle needs to be accompanied with code. Please don't ignore it or go around it. Post all the code in your question and also what you have tried. — Spokey, Sep 17 '14 at 10:36
@user3216677 your code works in [fiddle](http://jsfiddle.net/6d191oj7/2/). — Regent, Sep 17 '14 at 10:43

Kartikeya Khosla · Accepted Answer · 2014-09-17T11:13:44.847

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

edited Sep 17 '14 at 11:13

answered Sep 17 '14 at 10:38

Kartikeya Khosla

18,743
8
43
69

@user3216677..the fiddle you include have no jquery file included that is why problem occurs .. see demo in answer. – Kartikeya Khosla Sep 17 '14 at 10:42
Thanks Kartikeya, But what about the Show/Hide link at the bottom? – Albert Sep 17 '14 at 10:45
There is a problem, Show/Hide link is not working properly. Its not hiding all the rows below 5. – Albert Sep 17 '14 at 11:06
Worked this time, Thanks ! – Albert Sep 17 '14 at 11:10

Praveen Kumar Purushothaman · Answer 2 · 2014-09-17T10:45:52.903

You can use something like this, change your HTML like this:

<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>

And this is the jQuery:

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

Fiddle: http://jsfiddle.net/praveenscience/rkss956e/

Unfortunately i can't make any changes to html table coz data is fetched from sql database. — Albert, Sep 17 '14 at 11:07

Show/Hide specified number of table row

2 Answers2

Fiddle: http://jsfiddle.net/praveenscience/rkss956e/