javascript-切换具有主子级详细信息的html表的可见性

我有一个html表,其中显示了主子详细信息.
在主记录上单击加号()时,将显示相应的子项详细信息.我在这里有http://jsfiddle.net/BEEU3/3/的测试设置.(这并不完美)
我知道如何遍历dom来获取子元素,但请提出一种产生最佳性能的解决方案.

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");
});

解决方法:

您可以使用closest()和next()方法.首先,closest()查找被单击元素的最接近的tr父级,然后next()选择tr元素的下一个同级元素,该元素是具有.tr-child类的元素.

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

Fiddle

> closest()
> next()