0

所有者に応じてテーブルの複数の行を切り替える際の問題を解決しようとしています。

  • マスター行
    • グループ行
      • アカウント行
      • アカウント行
    • グループ行
      • アカウント行
      • アカウント行

マスター行のみを表示することから始め、マスター行をクリックして切り替えると、グループ行のみが表示され、グループ行をクリックすると、含まれているアカウント行が表示されます。

再度閉じることはできますが、アカウント行が開いたままマスター行全体を閉じると、開いたままになります。

これは私がこれまで使用してきた方法です：http：//jsfiddle.net/fHKcy/

今、私はネストされたdivを使用する必要があることを知っています。しかし、私は古いCMSで立ち往生しており、テーブルを使用する必要があります。

それぞれの「グループ」をtbodyで包むことでそれができるかもしれないという漠然とした感じがします。うーん、夕食後にそれをテストするかもしれません。

私が試していたのは、後に次のものを追加することでした$('[data-owner="' + parentId +'"]').hide();

if(accountType == 'master') {
    $('[data-owner="' + parentId +'"]').find('[data-account-level="account"]').hide();
}

しかし、私はそれを機能させることができませんでした。

4

3 に答える 3

1

シンプルなテーブルでこの jsfiddleを試してください

$(document).ready(function () {
    $(".hide").hide();
    $(".show").click(function () {
        $(this).nextUntil(".show").toggle();
    });
});
于 2013-04-11T07:52:29.077 に答える
0

これは、テーブルの行にクラスを追加するだけで簡単に実行できます。子行に親行に依存するクラスを与えてから、親行が選択されたときに子行を表示します (そして、以前に選択された親の子行を非表示にします)。

于 2013-02-08T01:20:03.393 に答える
0

問題を解決するのに役立つのは、夜の睡眠に勝るものはありません。

私が最初の投稿で疑ったように、data-owner 属性を持つ tbody 要素を使用するとうまくいくでしょう。

これで、マスター レベルはそれに続く tbody 要素を「所有」します。

<!-- MASTER ACCOUNT -->
<tr id="test1" class="pa-dt-master-account-level" data-account-level="master">
    <td class="pa-dt-account-details">
        <a class="pa-dt-toggle" href="#">Toggle</a><br />
        Test1
    </td>
</tr>
<tbody data-owner="test1">
    <tr> // etc
</tbody>

JavaScript は変更されません。

// Define our button for toggling
var button = $( "table.pa-dynamic-table a.pa-dt-toggle" );

button.click(function() {
    // get the parent ID
    var parentId = $(this).parents('tr').attr("id");
    // get the parent account level
    var accountType = $(this).parents('tr').attr("data-account-level");

    console.log(parentId);
    console.log(accountType);

    if ($(this).hasClass("pa-dt-toggle-active")) {
        $(this).removeClass('pa-dt-toggle-active');
        $('[data-owner="' + parentId +'"]').hide();

    } else {
        $(this).addClass('pa-dt-toggle-active');
        $('[data-owner="' + parentId +'"]').show();
    }
});

ここで動作することがわかります: http://jsfiddle.net/dKpxV/2/

唯一の問題は、この方法はおそらく現在よりも多くのレベルでは機能しないということです..しかし、グループ レベル アイテムのオープン/クローズ状態を保持するという利点があります。

はい、ネストされたリストを使用すると、これは間違いなくはるかに簡単になります..

于 2013-02-08T08:50:40.773 に答える