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

Barbara Streisand
Lepaskan: 2024-11-05 06:09:02
asal
564 orang telah melayarinya

How to Dynamically Expand and Collapse Table Rows with 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk
  • 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>
Salin selepas log masuk
  • 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>
Salin selepas log masuk
<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan