0

thead< > タグに含まれるヘッダーをクリックしてテーブルを非表示/表示する機能があります。クリックするとテーブルが非表示になり、ヘッダーだけが残ります。もう一度クリックすると、テーブルの非表示を解除できます。

複数のテーブルがあり、テーブルごとに記述するのではなく、関数でのみ使用する必要があります。これを行うために、引数 (this,this.lastSibling) を渡そうとしています。何らかの理由で、 this.lastSiblingはどのオブジェクトも対象としていません。考えられるノード ツリーをナビゲートするあらゆる方法を試しましたが、tbody をターゲットにすることはできません。

私のJavascript/Jquery

function ToggleTable(trigger,target){
    $(trigger).click(function(){
      $(target).toggle();
      ToggleTable(trigger,target)
    });
}

私のHTML

<table class="format2" >
    <thead onmouseover="ToggleTable(this,this.lastSibling)">
        <!--Title-->
    </thead>
    <tbody>
        <!--Cells with information in here-->
    </tbody>
    <!--Note No TFooter Tag-->
</table>

<--Other tables similar to the one above-->

前もって感謝します！

4

3 に答える 3

0

<thead>タグに含まれるヘッダーをクリックしてテーブルを非表示/表示する機能があります。クリックするとテーブルが非表示になり、ヘッダーだけが残ります。もう一度クリックすると、テーブルの非表示を解除できます。

私はあなたの現在のコードで迷っています。ただし、tbody (またはタグの最後の子要素) の可視性を切り替えたい場合は、<table>これを試すことができます。

function ready() {

  $('table > thead')
    .each(function(e){
      $(this).siblings(':last').hide();
    })
    .click(function(e) {
      $(this).siblings(':last').toggle();
    });

}

$(ready);

ライブサンプル: http://bl.ocks.org/3078240

于 2012-07-09T19:25:12.900 に答える
0

jQuery shim の代わりにコア JavaScript を使用するソリューションを試してみたい場合は、これでうまくいくかもしれません。これは、DOM 内の任意のノードを受け入れるように簡単に変更できるはずですが、HTML 要素 (たとえば、テキスト ノードではない) である最後の兄弟を返す関数です。

function getLastSibling(el) {
    var siblings, x, sib;

    siblings = el.parentNode.children;
    x = siblings.length;

    while ((sib = siblings[x - 1]) && x >= 0) {
        console.log(sib);
        console.log(sib.nodeType);
        if (sib.nodeType != 1 || sib.tagName == 'SCRIPT') {
            x--;
        } else {
            return sib;
        }
    }

    return null;
}
于 2012-07-09T19:25:14.047 に答える
0

すべてのテーブルにクラス format2 があると仮定します。これを試して：

$("table.format2 > thead").click(function(){
    $(this).next("tbody").toggle();
});

JSFiddle: http://jsfiddle.net/KcY4X/

于 2012-07-09T18:57:51.670 に答える