ホームページ >ウェブフロントエンド >jsチュートリアル >拡張可能な「詳細」テーブル Rows_jquery
拡張可能な「詳細」テーブル Rows_jquery
- WBOYオリジナル
- 2016-05-16 19:09:211336ブラウズ
一般的な 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');
});表の例（行をクリック）
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。