web-dev-qa-db-ja.com

jQueryでテーブルを表示/非表示

次のHTMLコードに似た一連のテーブルがあります。

<table id="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table id="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

それぞれのヘッド（<th>）をクリックします。さらに、テーブルは拡張されていない状態で開始する必要があります。次のjQueryスクリプトを使用します。

$(document).ready(function(){
    $('#film td').hide();
});

$(document).ready(function(){
var n1 = 0;
      $('#film th.1').click(function(){
         if(n1 == 0){
         $('#film td.1').show();
         n1 = 1;
         }else{
        $('#film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('#film th.2').click(function(){
         if(n2 == 0){
         $('#film td.2').show();
         n2 = 1;
         }else{
        $('#film td.2').hide();
         n2 = 0;}
       });
});

しかし、実行すると、一番上のテーブルだけが2番目のテーブルではなく表示/非表示になります。誰かが私が間違っているところを見ることができますか？

javascriptjqueryanimationhtml-table
9
Andreas Jarbol

複数の要素で同じIDを使用しています。 IDで検索すると、jQueryは1つのアイテム（そのIDを持つ最初のアイテム）のみを返します。したがって、コードは最初のテーブルでのみ機能します。 IDの代わりにテーブルのクラスを使用します。

<table class="film">......</table>

$('.film').each(function(f) {
    //this function will execute for each element with the class "film"
    //refer to the current element during this function using "$(this)"
});
10
yoozer8

これを行うはるかに簡単な方法は、table値のIDの代わりにクラスを使用することです。これにより、グループとしてより簡単に参照できます

<table class="film"> ...

その後、次のjqueryはあなたが探している動作を提供するはずです

$(document).ready(function() {
    $('.film td').hide();
    $('th').click(function() {
       $(this).parents('table').find('td').toggle();
    }); 
});

フィドル： http://jsfiddle.net/WZUAZ/1/

6
JaredPar

ここに作業バージョンがあります： http://jsfiddle.net/6Ccj7/

あなたのhtmlは壊れています。これを変える：

<td class"2">//BODY CONTENT 2//</td>

これに：

<td class="2">//BODY CONTENT 2//</td>

また、実際に2つのインスタンスがある場合、filmにidを使用しました。代わりにクラスを作成します。

<table class="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table class="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

更新されたJSは次のとおりです。

$(document).ready(function(){
$('.film td').hide();});

$(document).ready(function(){
var n1 = 0;
      $('.film th.1').click(function(){
         if(n1 == 0){
         $('.film td.1').show();
         n1 = 1;
         }else{
        $('.film td.1').hide();
         n1 = 0;}
       });
var n2 = 0;
      $('.film th.2').click(function(){
         if(n2 == 0){
         $('.film td.2').show();
         n2 = 1;
         }else{
        $('.film td.2').hide();
         n2 = 0;}
       });
});
2
Allen Liu

jqueryでテーブルを表示/非表示

コード here！ 私はuseslideToggle + data attr

1
Krucamper

2つの問題：
まず、HTMLが壊れています
変化する

 <td class"2">//BODY CONTENT 2//</td>

に

 <td class="2">//BODY CONTENT 2//</td>

次に、HTML IDは一意である必要があるため、代わりにクラスを使用することをお勧めします。

これが実際の例です： http://jsfiddle.net/jkohnen/tBkh4/

.toggle（）を使用してjQueryを少し簡略化しました

それが役に立てば幸い、そしてハッピーコーディング。

1
Justin Kohnen

このjQueryを使用すると、表示と非表示を切り替えることができます

$("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });

html

<button id="hide">Hide</button>
<button id="show">Show</button>
0
Madhuka Dilhan