1

いくつかのネストされたテーブルを持つhtmlがあります（この例では、ネストされているのは1つだけです）：

<table class="toptable" border="1">
    <tbody>                   
        <tr class="accordion">
            <td>TD1</td>
            <td>TD2</td>
            <td>TD3</td>
        </tr>
        <tr>
            <td colspan="3">
            <table class="nested" border="1">
                <tbody>
                    <tr>
                        <td>nestedTD1</td>
                        <td>nestedTD2</td>
                    </tr>
                    <tr>
                        <td>nestedTD3</td>
                        <td>nestedTD4</td>
                    </tr>
                </tbody>
            </table>          
            </td>
        </tr>
    </tbody>
</table>

私のjQueryでは、最初の行をクリックしてメインテーブルの2行目を表示/非表示にできます。

$(function() {
  $(".toptable tr:not(.accordion)").hide();
  $(".toptable tr:first-child").show();
  $(".toptable tr.accordion").click(function(){
  $(this).nextAll().fadeToggle();
    });
  });

実際の例はこちら: http://jsfiddle.net/nbag/pAxry/1/

私の問題は、ネストされたテーブルの最初の行のみが表示されていることです。jquery でのツリー トラバーサルの問題だと思います。に変更しようとしましたがnextAll()、うまくいきませfind("*")ん。

助けてくれてありがとう！

4

1 に答える 1

1

問題は、テーブルの行を非表示にする最初のセレクターにあると思います。これを試してください（デモ）：

$(function () {
    $(".toptable > tbody > tr:not(.accordion)").hide();
    $(".toptable tr:first-child").show();
    $(".toptable tr.accordion").click(function () {
        $(this).next().fadeToggle();
    });
});
于 2013-05-21T00:25:52.550 に答える