Bagaimana untuk Mengembangkan dan Meruntuhkan Baris Jadual Secara Dinamik dengan jQuery?

Membesar dan Meruntuhkan Baris Jadual Secara Dinamik dengan jQuery

Masalah:

Membesar atau runtuh jadual baris apabila pengepala lajur tertentu diklik menimbulkan cabaran. Untuk memudahkan tugas ini, kelas CSS tersuai boleh digunakan untuk membezakan baris dalam setiap pengepala. Walau bagaimanapun, mengurus berbilang kelas CSS untuk berbilang pengepala boleh menjadi menyusahkan.

Penyelesaian:

Untuk mengelakkan kerumitan menjejak berbilang kelas CSS, pendekatan alternatif memanfaatkan nextUntil( ) kaedah dalam jQuery. Kaedah ini mendapatkan semula semua baris selepas baris pengepala yang diklik, sehingga baris pengepala seterusnya ditemui.

Coretan Kod:

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

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

Contoh:

Dalam contoh ini, "pengepala" kelas diberikan kepada baris pengepala. Apabila baris pengepala diklik, baris di bawahnya ditogol antara tersembunyi dan kelihatan, menggunakan kaedah slideToggle().

Ciri Tambahan:

• Anda boleh menggunakan elemen span dalam baris pengepala untuk memaparkan tanda " " atau "-", yang bertukar-tukar selepas baris itu dikembangkan atau diruntuhkan:

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

• Untuk menogol rentang ikon/teks secara tidak segerak selepas togol selesai, gunakan promise() kaedah slideToggle():

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

• Sebagai alternatif, gunakan elemen pseudo CSS untuk mewakili pengembangan/runtuh tandatangani dan togol kelas pada pengepala:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengembangkan dan Meruntuhkan Baris Jadual Secara Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!