jQueryでテーブルの行を展開/折りたたむにはどうすればよいですか?

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

ヘッダーのクリックに基づいてテーブルの行を展開または折りたたむことは、Web デザインの一般的な要件です。この記事では、jQuery を使用してこれを実現する方法を検討します。

次のテーブル構造があるとします。

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

各ヘッダー行に一意のクラスを割り当てることで、このタスクに取り組むことができます。ヘッダーをクリックすると、nextUntil メソッドを使用して、次のヘッダーまでその下のすべての行を選択できます。これにより、クリックされたヘッダーに基づいて関連する行のみを折りたたんだり展開したりできます。

この動作を実装する簡単な jQuery コード スニペットを次に示します。

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

このコードでは、ヘッダークラ​​スを使用して、すべての要素にクリックイベントを付加します。ヘッダーをクリックすると、次のヘッダーまでの後続のすべての行が検索され、slideToggle を使用して表示/非表示が切り替わります。

代替メソッド

もう 1 つのオプションは、slideToggle の代わりに toggle メソッドを使用することです。より単純な実装:

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

ここでは、クリックされたヘッダーの展開クラスを切り替え、toggle を使用して後続のすべての行の表示を切り替えます。

最後に、CSS 疑似要素も使用できます。展開/折りたたみ状態をより視覚的に表現するために利用されます:

<code class="css">.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}</code>

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

このバージョンでは、expand クラスは、CSS 疑似要素によって表示される符号もプラスからマイナスに変更します。行の状態を視覚的に示します。

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