0

格納可能な列を持つ動的な html テーブルを作成しようとしています。実際には、ヘッダーごとに 20 列、最大 400 の値を持つことができます。次のようなデータを提示したいと思います。

-----------------------------------------------------------
|    |            Header 1          | Header 2 | Header 3 |
-----------------------------------------------------------
|val1| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
|val2| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
 ...
-----------------------------------------------------------
|valx| col1.1 | col1.2 |...| col1.x | col 2.1  | col 3.1  |
-----------------------------------------------------------
|foot| foot1.1| foot1.2|...| foot1.x| foot2.1  | foot3.1  |
-----------------------------------------------------------

colx.1をクリックして、同じヘッダーの下のすべての列を展開または表示し、他のヘッダーの他の列を折りたたむ（または非表示にする）機能が必要です。上の表から任意の col2.1 セルをクリックすると、表が次のように変更されます。

-----------------------------------------------------------
|    | Header 1 |            Header 2          | Header 3 |
-----------------------------------------------------------
|val1| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
|val2| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
 ...
-----------------------------------------------------------
|valx| col 1.1  | col2.1 | col2.2 |...| col2.x | col 3.1  |
-----------------------------------------------------------
|foot| foot1.1  | foot2.1| foot2.2|...| foot2.x| foot3.1  |
-----------------------------------------------------------

私は次のようなことをしようとしました: 表示/非表示にできるすべての td 要素で非表示クラスを使用し、次のようなものにします:

var rows = $('tr');
rows.find('th:eq(1), td:eq(1)').on('click', function() {
    $('.hideable').toggle()
});

また、それに応じてヘッダーとフッターのコルスパンを変更する必要があります

('th#foot1.1').attr('colspan',1)

上記の解決策は機能しますが、非常に非効率的で、きれいに見えません。

簡略化された jsFiddle サンプルjsfiddle.net/yrMsXを追加しました。アイデアは、ヘッダー 1 と 2 を同時に展開しないことです。

これを達成するためのより良い、より効果的な方法はありますか?

4

1 に答える 1

1

わかりました、このフィドルの希望はあなたが探していたものです。

基本的に、これに集中する必要があります。

  • ヘッダーとそのサブ列に同じクラスを与える
  • 切り替えたいヘッダーのcolspan属性を設定します
  • 各ヘッダーにdata-fullcol属性を設定して、最大colspanを追跡します
  • colspan属性を持つ列のみクリック イベント にバインドします。
  • 表示したままにしたい列にファーストクラスを与える
  • クリックイベントで、クラスがクリックされたヘッダーのクラスと等しくなく、最初のクラスも持たないすべての列を非表示にします
  • 他のすべてのヘッダーcolspanを 1 に設定します
  • クリックしたヘッダーと同じクラスのすべての列を切り替えます
  • ヘッダーのcolspanを切り替えるには、 colspanを(data-fullcol - colspan +1)に設定します

NB : これは、ヘッダーに単一のクラスがある場合にのみ機能します。複数のクラスを指定する場合は、data-classなどの特定の属性に「重要なクラス」を保存することを検討してください。

于 2012-09-30T10:32:11.617 に答える