jQueryでテーブルの行を展開したり折りたたんだりする方法は?

jQuery を使用したテーブルの行の展開と折りたたみ

問題:

テーブルの行の展開と折りたたみ特定のヘッダー列をクリックすると、展開/折りたたみがクリックされたヘッダーの下の行に制限されます。

提案された解決策:

1. ヘッダーを識別する行: ヘッダー行に「header」などのクラスを追加します。
2. 展開/折りたたみの切り替え: jQuery の .nextUntil() メソッドを使用して、ヘッダー行の下にあるすべての行を選択します。次のヘッダーが見つかるまでヘッダーをクリックします。次に、.slideToggle() を使用して、これらの行の表示/非表示を切り替えます。

コード スニペット:

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

HTML 構造:

<code class="html"><table border="0">
  <tr class="header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

追加機能:

• 展開/折りたたみアイコン: ヘッダー セル内のspan要素を使用して、アイコンを展開または折りたたむ。現在の状態に基づいてアイコンを更新します。
• Promise の使用法: jQuery の .promise() メソッドを使用して、アニメーションなどの非同期操作を処理します。
• CSS擬似要素: CSS 擬似要素を利用して展開/折りたたみインジケーターを表し、ヘッダーのクラスを切り替えて可視性を制御します。

以上がjQueryでテーブルの行を展開したり折りたたんだりする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。