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