JQueryを使用して次の表の行を見つけよう


15

JQueryを使用すると、クリックされたセルにある画像srcを変更するテーブル・セル(以下、class = "expand")に、 plus.gifで、minus.gifと交互)、その行が "hide"のクラスを持っているかどうかに基づいて、そのすぐ下の行を非表示にします。 (クラスに「hide」がある場合はそれを表示し、「hide」のクラスがない場合は非表示にします)。私は、マークアップ内のクラスとクラスの変更に柔軟に対応しています。

おかげ

表の行

<tr> 
<td class="expand"><img src="plus.gif"/></td> 
<td>Data1</td><td>Data2</td><td>Data3</td> 
</tr> 
<tr class="show hide"> 
<td> </td> 
<td>Data4</td><td>Data5</td><td>Data6</td> 
</tr> 
18

あなたがショーを必要とタグを隠さない:

$(document).ready(function(){ 
    $('.expand').click(function() { 
     if($(this).hasClass('hidden')) 
      $('img', this).attr("src", "plus.jpg"); 
     else 
      $('img', this).attr("src", "minus.jpg"); 

     $(this).toggleClass('hidden'); 
     $(this).parent().next().toggle(); 
    }); 
}); 

編集:さて、私は、画像を変更するためのコードを追加しました。それはそれを行う一つの方法です。後続の行が隠されていて、行が表示されたときにその行を削除したときに、クラスとしてexpand属性にクラスを追加しました。

  0

jQueryが大好きですか? '$(this).find( 'img')の代わりに、少し簡潔な' $( 'img'、this) 'を使うことができます。 '$'関数は2番目のパラメータを受け入れます。それが使用されるとき、jQueryはセレクタを 'this'の文脈で探すだけです。 23 9月. 082008-09-23 20:30:33

  0

ありがとう、私はそれらの変更を行いました。 23 9月. 082008-09-23 20:37:07

  0

私にはちょっと後悔しています。他のすべては左から右に読み込まれますが、その構文を使用すると、右から左に読む必要があります。彼らはどちらもまったく同じ効果があるので、私は一般的に$(this).find(...)スタイルに固執しようとします。 20 10月. 082008-10-20 01:42:46

+2

パフォーマンスの違いがあるのだろうかと思います。例えば。どちらか一方を使用すると、jQueryの中で実行するコードが違うのですか? 06 3月. 092009-03-06 19:06:15


-2

は、これはイメージが

<tr> 

<td colspan="2" align="center" 
<input type="image" src="save.gif" id="saveButton" name="saveButton" 
    style="visibility: collapse; display: none" 
    onclick="ToggleFunction(false)"/> 

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
     name="saveButton" style="visibility: collapse; display: inline" 
     onclick="ToggleFunction(true)"/> 
</td> 
</tr> 

変更はJSでだ独自の機能にonClickイベントがそれらの間で切り替えるには、HTMLに設定されている方法です。

ToggleFunction(seeSaveButton){  
    if(seeSaveButton){ 
     $("#saveButton").attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
     $("#saveButtonDisabled").attr("disabled", true) 
           .attr("style", "display: inline;"); 
    }  
    else {  
     $("#saveButton").attr("disabled", false) 
         .attr("style", "display: inline;"); 
     $("#saveButtonDisabled") 
         .attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
    } 
} 
  0

各コード行を4つ分だけインデントすると、開始タグなどを示す "code"ブロックとして表示されます。 23 9月. 082008-09-23 20:28:27


1

はこれを試してみてください...

//this will bind the click event 
//put this in a $(document).ready or something 
$(".expand").click(expand_ClickEvent); 

//this is your event handler 
function expand_ClickEvent(){ 
    //get the TR that you want to show/hide 
    var TR = $('.expand').parent().next(); 

    //check its class 
    if (TR.hasClass('hide')){ 
     TR.removeClass('hide'); //remove the hide class 
     TR.addClass('show'); //change it to the show class 
     TR.show();    //show the TR (you can use any jquery animation) 

     //change the image URL 
     //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'minus.gif'); 
    } else { 
     TR.removeClass('show'); //remove the show class 
     TR.addClass('hide'); //change it to the hide class 
     TR.hide();    //hide the TR (you can use any jquery animation) 

     //change the image URL 
    //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'plus.gif'); 
    } 
} 

・ホープ、このことができます。

  0

ありがとう、それは参考になります....しかし$( '。expand img')はすべてに影響します展開クラスの画像...私はちょうどテーブルのセル(​​)の1つの画像を有効にしたい 23 9月. 082008-09-23 20:36:57


9

3者演算子の愛はありませんか? :)私は、読みやすさの考慮事項を理解しますが、何らかの理由でそれは私のようにそれを書くことのためにクリック:

$(document).ready(function() { 
    $(".expand").click(function() { 
      $("img",this).attr("src", 
       $("img",this) 
        .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif" 
      ); 
      $(this).parent().next().toggle(); 
    }); 
}); 

...と無関係なクラスの利点を持っています。


3

私は最近この問題を解決しなければなりませんでしたが、私の中にはいくつかのネストされたテーブルが含まれていましたので、より具体的で安全なバージョンのjavascriptが必要でした。私の状況はちょっと違っていました。なぜなら私はtdの内容を持っていて、次のTRをトグルしたいからです。しかし、コンセプトは変わりません。

$(document).ready(function() { 
    $('.expandButton').click(function() { 
     $(this).closest('tr').next('tr.expandable').fadeToggle(); 
    }); 
}); 

最も近いTR(この場合は最初の親)を最もよく捕捉する。あなたは非常に具体的にする場合は、CSSクラスを追加することができます。次に、このボタンのターゲットである展開可能なクラスで次のTRを取得するように指定します。それから私はfadeToggle()それが表示されるかどうかをトグルする。セレクタを指定すると、実際に処理する内容を絞り込むことができます。