クリックイベントを使用してランダムに生成された表要素を表示/非表示

Question

ランダムに生成された複数の表があります。残りの行を隠して表示される各表の最初の行のみを表示します。テーブルの表示行をクリックすると、残りの行/内容を表示/非表示にします。 Jqueryを使用してこれをどのように達成できますか？

Answer 1

可能であれば）：

<style type="text/css"> 
table tbody tr { display: none; } 
</style> 
<script type="text/javascript"> 
$(function() { 
    $("table thead tr").click(function() { 
    $("tbody tr", $(this).parents("table")[0]).show(); 
    }); 
}); 
</script> 
<table> 
<thead> 
    <tr> ... first row is in thead not tbody ... </tr> 
</thead> 
<tbody> 
    <tr> ... row1 .. </tr> 
    <tr> ... row2 .. </tr> 
    <tr> ... row3 .. </tr> 
</tbody> 
</table> 

この特定の猫には多くの方法があります。

Answer 2

次のようないくつかの機能を記述する必要があります。

function AttachEvent(tableId) 
{ 
    $("#" + tableId + " tbody tr:first-child").click(ToggleRows); 
} 

function ToggleRows(e) 
{ 
    // get src table of e 
    // you can find code for this on SO or quirksmode.org (or basically anywhere) 

    $(src).find("tr").hide(); 
    $(src).find("tr:first-child").show(); 
} 

それが発生したときに、テーブルのidを持つAttachEventを呼び出した場合、それは最初の行にイベントをバインドします。

これらの関数は、row [0]以外のすべての行がdisplay：noneに設定されているテーブルを生成することを前提としています。

私はこれをテストしていませんが、理論はうまくいくはずです。バインドするイベントや、表示/非表示にtrやtdsを使用するかどうかなど、いくつかの変更が必要な場合があります。あなたが最初の行をクリックしたときにそれらを見えるようにするに

$("table tbody tr:not(:first-child)").hide(); 

：

$("table tbody tr:first-child").click(function() { 
    $(this).siblings().show(); 
}); 

代わりにあなたが（少し違ってテーブルを整理したい場合があり、すべての行が、最初のを隠すために

Answer 3

私は同様の必要性に遭遇しましたが、たくさんの行を切り替えようとすると、tbody（jQueryがクラッシュしたようです）を表示/非表示にしました。私のテーブルはCletus'ソリューションに基づいて「データテーブル」クラスによって識別されると、私は（.toggleを使用）（jQueryのバージョン1.0以降で利用可能）されています

$(document).ready(function() { 
     //SK toggles datatables (show/hide tbody when clicking thead) 
     $('table.datatable thead tr').on('click', function(event) { 
      $('tbody', $(this).parents('table')[0]).toggle(); }); 

}) 

これはあなたがthead要素とHTML5の仕様に従って編成あなたのテーブルを持っていると仮定し、 tbody。 も参照してくださいhttp://api.jquery.com/toggle/