拡張可能な「詳細」テーブル Rows_jquery

一般的な UI には、データ行のテーブルがあり、クリックすると展開され、「親」行の下にある「子」行の詳細な内訳が表示されます。

唯一の要件は次のとおりです:

各親行 (tr) に「親」のクラスを配置する
各親行 (tr) に ID を与える
各子行を与える「子 ID」のクラス。ID は、属する親 tr の ID です。

コード例
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","クリックすると展開/折りたたみ")
.click(function(){
$(this).siblings ('.child-' this.id).toggle();
$('tr[@class^=child-]').hide().children('td');
});表の例（行をクリック）