3

マスターと子の詳細を示す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");
});
4

1 に答える 1

3

closest()とnext()メソッドを使用できます。最初closest()にクリックされた要素の最も近いtr親を見つけ、次にnext()クラスが。の要素であるtr要素の次の兄弟を選択します.tr-child。

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

フィドル

于 2012-08-26T12:41:59.893 に答える