jQueryでテーブルの行を展開/折りたたむにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-03 07:54:03

オリジナル

792 人が閲覧しました

How to Expand/Collapse Table Rows with 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 サイトの他の関連記事を参照してください。