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

問題:

テーブルの展開または折りたたみ特定の列ヘッダーをクリックしたときの行の表示には課題が生じます。このタスクを簡素化するために、カスタム CSS クラスを使用して各ヘッダー內(nèi)の行を區(qū)別できます。ただし、複數(shù)のヘッダーに対して複數(shù)の CSS クラスを管理するのは面倒になる可能性があります。

解決策:

複數(shù)の CSS クラスを追跡する複雑さを避けるために、別のアプローチでは nextUntil( )jQueryのメソッド。このメソッドは、次のヘッダー行が見つかるまで、クリックされたヘッダー行に続くすべての行を取得します。

コード スニペット:

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

HTML構(gòu)造:

<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>

例:

この例では、ヘッダー行にクラス「header」が割り當てられています。ヘッダー行をクリックすると、slideToggle() メソッドを使用して、そのすぐ下の行の非表示と表示が切り替わります。

追加機能:

• ヘッダー行內(nèi)でspan要素を使用すると、「」または「-」記號を表示できます。これらの記號は、行が展開されるか、または展開されると切り替わります。折りたたまれた:

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

• 切り替えの完了後にスパン アイコン/テキストを非同期で切り替えるには、slideToggle() メソッドの Promise() を使用します:

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

• または、CSS 疑似要素を使用して、展開/折りたたみの記號を付け、ヘッダーのクラスを切り替えます:

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

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

以上がjQuery を使用してテーブルの行を動的に展開したり折りたたんだりする方法は?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。