0

ネストされたテーブル構造でデータを表示したい (次のリンクを確認してください)

以下の私のコードを参照してください。asp.netではグリッドビューで実装していましたが、htmlで実装しようとしています。

問題は：

  • 最初のテーブル セル (td) をクリックすると、最後の td が表示されます。
  • 現在、最後の td は表示されません
  • 最初は最後の td を非表示にする必要があります。

私を助けてください。

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        $(function() {
            $(".toptable > tbody > tr > td:not(.n1)").hide();
            $(".toptable tr").find('td:first').click(function() {
                $(this).find('td:last').show();
            });
        });
    </script>
</head>
<body>
    <table class="toptable" border="1">
        <tbody>
            <tr class="accordion">
                <td class="id1 n1">TD1</td>
                <td class="id1 n1">TD2</td>
                <td class="id1 n1">TD3</td>
                <td class="nested">
                    <tr>
                        <td colspan="3">
                            <table border="1">
                                <tbody>
                                    <tr>
                                        <td>nestedTD1</td>
                                        <td>nestedTD2</td>
                                    </tr>
                                    <tr>
                                        <td>nestedTD3</td>
                                        <td>nestedTD4</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </td>
            </tr>
            <tr class="accordion">
                <td class="id1 n1">TD1</td>
                <td class="id1 n1">TD2</td>
                <td class="id1 n1">TD3</td>
                <td class="nested">
                    <tr>
                        <td colspan="3">
                            <table border="1">
                                <tbody>
                                    <tr>
                                        <td>nestedTD1</td>
                                    </tr>
                                    <tr>
                                        <td>nestedTD3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </td>
            </tr>
        </tbody>
    </table>
</body>

4

5 に答える 5

0

以下のコードを試してください

 $(function () {
     $(".toptable > tbody > tr > td:not(.n1)").hide();
     $(".toptable tr").find("td:first").click(function () {         
         $(this).closest('tr').children('td:last').show();
     });
 });

jsfiddle http://jsfiddle.net/7Jfx7/1/のサンプルも確認してください

于 2013-07-15T10:06:40.417 に答える
0

まず、HTML が適切ではありません<tr><td colspan="3"> and </td></tr> 。http://jsfiddle.net/code_rum/aBWFY/を削除してください。

クラスを使用して td を見つける代わりに、last:child を使用できます。

$(function () {

    $(".toptable > tbody > tr > td:not(.n1)").hide();
    $(".toptable tr").find('td:first').click(function () {
  $(this).siblings(':last-child').show();
    });
});
于 2013-07-15T10:36:34.400 に答える