-2

HTMLテーブルに疑問があります。HTML テーブルにドロップダウン メニューを作成することは可能ですか? 私はこのようなものを表示したい:

1 video1 cam1  signal-present
2 video2 cam2  signal-present
3 video3 cam3  signal-present

行のいずれかをクリックすると、展開して次のような別の行のセットが表示されます。

1 video1 cam1  signal-present
  -1 Audio1 source1 present
  -2 Audio1 source1 present
2 video2 cam2  signal-present
3 video3 cam3  signal-present

テーブルは Javascript を使用して入力されます。テーブルよりもこれを行うためのより良い方法はありますか。

4

1 に答える 1

1

あなたが説明しているのは、jQuery アコーディオン機能です。そこにはたくさんのアコーディオンプラグインがありますが、それらはすべて同じことをします:

作業例: http://jsfiddle.net/7vX3S/5/

  • クリック クラス (これはデフォルトで表示されるものです)
  • コンテンツ クラス (これは、click classがクリックされたときに表示されるものです)

したがって、あなたを作成し<tr>、click class特定の<tr>ものがクリックされると、別の<tr>スライドダウン (展開) が表示されます。

jQuery:

  $(".clicker").on("click", function(){
    if($(this).next().hasClass("down")){
        $(this).next().slideUp("normal").removeClass("down");
    }
    else{
       $(this).next().slideDown("normal").addClass("down");
    }
});

HTML:

<table>
    <tr class="clicker">
        <td>some data</td>
    </tr>
    <tr class="hidden">
        <td>Some new data here</td>
    </tr>
</table>

CSS:

tr.hidden{

    display: none;
}
于 2013-03-29T17:11:03.660 に答える