Toggle (Show / Hide) Multiple Rows in a HTML Table by Jquery

Posted by Real

Hi Guys today I am going to show you, how come we will toggle multiple Rows, of a Table at a time on single click I have also posted how to toggle rows (single) you can have a glance. This functionality is very handy and useful in certain scenarios.

Suppose if you are having a auto generated huge long HTML Table at that time this functionality is useful and if the rows are grouped based on certain business requirement that time is most useful.

I got this requirement in one of my module and want to share this with you all. Lets get start.

*.aspx (Generally Default.aspx or normal *.html page)

<table border="1" cellpadding="0" cellspacing="0">

            <tbody>

                <tr class="parentRow" id="1">

                    <td>

                        <h1 id="pm" style="background: #dedede; text-align: center; border: 1px solid #000;">

                            -</h1>

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                </tr>

                <tr class="childRow-1">

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                </tr>

                <tr class="childRow-1">

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                    <td>

                        Sample text from 2bexpert in Microsoft technologies

                    </td>

                </tr>

            </tbody>

        </table>

 

We can put above code inside the body (<body> </body>) tag of html page. after this we need a Jquery Code to handle toggling showing hiding rows based on id of parent Row.

 

Jquery Code:

Within Head tag we can write below mention code. I have used jquery-1.10.0.js, you can use latest one by clicking on this link: Latest Jquery

<script src="js/jquery-1.10.0.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $('tr.parentRow')

        .click(function () {

            $(this).siblings('.childRow-' + this.id).toggle(300, "linear", function () {

                if ($(this).is(':visible') == true) {

                    $('h1').text("-");

                } else { $('h1').text("+"); }

            });

        });

 

        });

    </script>

 

That's it now we are done, below is the Demo:

 

Demo:

toggle multiple rows

Thanks and Regards,

Anand

Comments

Post a Comment

Thanking you for the comment.

Technology