CODEWITHSUNDEEP
javascriptjqueryhtml
aravind
aravind

Reputation: 535

Toggle visibility of an html table with master child details

I have the an html table which shows master-child details.
On clicking the plus symbol (+) against the master record, corresponding child details to be shown. I have the test setup here http://jsfiddle.net/BEEU3/3/. (which is not perfect)
I know how to traverse the dom to get the child elements but please suggest a solution which yields best performance.

HTML:

<table class="table table-bordered">
<tr>
 <th></th>
 <th>Name</th>
 <th>Details</th>
</tr>
    <tr>
        <td><i class="icon-plus-sign"></i></td>
        <td>name1</td>
        <td>detail1</td>
    </tr>
    <tr class="tr-child">
        <td colspan="3">
            <table class="table table-bordered">
                <tr>
                    <th>SubDetails</th>
                    <th>SubDetails</th>
                </tr>
                <tr>
                    <td>SD1</td>
                    <td>Test1</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

jQuery:

$(".icon-plus-sign").click(function () {
      $('.tr-child').toggle("slow");
});

Upvotes: 3

Views: 1050

Answers (1)

Ram
Ram

Reputation: 144709

You can use closest() and next() methods. At first closest() finds the closest tr parent of the clicked element, then next() selects the next sibling of the tr element which is an element with class of .tr-child.

$(".icon-plus-sign").click(function () {
     $(this).closest('tr').next().toggle("slow");
});

Fiddle

Upvotes: 3

Related Questions