Bagaimana untuk Melaksanakan Pengembangan Baris Jadual Dinamik dengan jQuery?

Peluasan Baris Jadual Dinamik dengan jQuery

Apabila bekerja dengan data jadual, keupayaan untuk mengembangkan dan meruntuhkan baris atas permintaan boleh meningkatkan interaksi pengguna dengan ketara . Dalam senario ini, anda mencari penyelesaian untuk mencapai kefungsian ini apabila lajur pengepala tertentu diklik.

Pendekatan dengan Perbezaan Kelas

Satu pendekatan ialah menetapkan kelas unik kepada baris kepunyaan setiap pengepala. Apabila pengepala diklik, anda boleh menggunakan jQuery untuk mencari baris yang berkaitan dan menggunakan kesan slideToggle() sama ada untuk mengembangkan atau meruntuhkannya. Walaupun kaedah ini berkesan, menguruskan berbilang kelas CSS boleh menjadi menyusahkan dengan banyak pengepala.

Pendekatan Alternatif: nextUntil()

Alternatif yang lebih mudah menggunakan fungsi nextUntil() jQuery . Dengan menambahkan kelas "pengepala" pada baris pengepala, anda boleh menggunakan kod berikut:

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

Fungsi ini membolehkan anda melintasi baris jadual di bawah pengepala yang diklik sehingga menemui pengepala lain. Kesan slideToggle() kemudiannya digunakan pada baris yang sepadan, memberikan kefungsian pengembangan/runtuhkan yang diingini.

Demo dan Variasi

Kod HTML dan JavaScript yang disediakan menunjukkan perkara ini pendekatan. Contoh tambahan menunjukkan cara menggunakan elemen span dalam pengepala untuk memaparkan ikon ' ' atau '-' untuk menunjukkan pengembangan/runtuh.

Untuk kesan yang lebih dinamik, anda boleh menggunakan janji untuk menogol ikon/ teks selepas togol selesai sekiranya berlaku peralihan animasi.

Sebagai alternatif, elemen pseudo CSS boleh digunakan untuk mewakili tanda pengembangan/runtuh. Apabila pengepala diklik, kelas ditogol pada pengepala dan baris jadual dikembangkan atau diruntuhkan dengan sewajarnya.

Teknik ini menyediakan kaedah yang fleksibel dan cekap untuk mengembangkan/meruntuhkan baris jadual sebagai tindak balas kepada klik pengepala.

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