jQuery を使用して動的テーブル行拡張を実装するにはどうすればよいですか?

jQuery を使用した動的テーブル行拡張

表形式データを操作する場合、オンデマンドで行を拡張および折りたたむ機能により、ユーザー インタラクションが大幅に強化されます。 。このシナリオでは、特定のヘッダー列がクリックされたときにこの機能を実現するソリューションを探します。

クラス区別によるアプローチ

1 つのアプローチは、一意のクラスを割り当てることです。各ヘッダーに属する行に移動します。ヘッダーをクリックすると、jQuery を使用して関連する行を見つけ、slideToggle() エフェクトを適用してそれらを展開または折りたたむことができます。この方法は効果的ですが、多数のヘッダーがあるため、複数の CSS クラスの管理が煩雑になる可能性があります。

代替アプローチ: nextUntil()

より簡単な代替方法では、jQuery の nextUntil() 関数を利用します。 。ヘッダー行に「ヘッダー」クラスを追加すると、次のコードを使用できます。

<code class="js">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

この関数を使用すると、別のヘッダーが見つかるまで、クリックされたヘッダーの下にあるテーブルの行をトラバースできます。次に、slideToggle() 効果が一致する行に適用され、必要な展開/折りたたみ機能が提供されます。

デモとバリエーション

提供された HTML および JavaScript コードは、これを示しています。アプローチ。追加の例では、ヘッダー内でspan要素を使用して展開/折りたたみを示す「 」または「-」アイコンを表示する方法を示しています。

より動的な効果を得るには、promiseを使用してアイコン/を切り替えることができます。アニメーション化されたトランジションの場合、切り替えが完了した後のテキスト。

または、CSS 疑似要素を使用して展開/折りたたみ記号を表すこともできます。ヘッダーがクリックされると、ヘッダー上でクラスが切り替わり、それに応じてテーブルの行が展開または折りたたまれます。

これらの技術は、ヘッダーのクリックに応じてテーブルの行を展開/折りたたむための柔軟で効率的な方法を提供します。

以上がjQuery を使用して動的テーブル行拡張を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。