Bagaimana untuk Melaksanakan Pengisihan Jadual JavaScript Asas untuk Pengalaman Pengguna yang Dipertingkatkan?

Melaksanakan Pengisihan Jadual JavaScript Asas

Apabila ia berkaitan dengan pengendalian data jadual, keupayaan untuk mengisih kandungannya boleh meningkatkan pengalaman pengguna dengan ketara. JavaScript menyediakan cara yang mudah untuk mencapai fungsi ini, membolehkan pembangun mencipta penyelesaian pengisihan jadual dinamik.

Memahami Penyelesaian

Penyelesaian JavaScript yang disediakan menawarkan pendekatan yang mudah untuk abjad menyusun kandungan jadual HTML. Ia berfungsi seperti berikut:

• Pendengar acara klik terikat pada semua sel pengepala () dalam jadual.
• Setelah mengklik pengepala, skrip mengenal pasti jadual yang sepadan dan mengekstrak semua baris jadual (tidak termasuk yang pertama, yang mengandungi maklumat pengepala).
• Baris itu kemudian diisih berdasarkan nilai lajur yang diklik, menggunakan perbandingan sedar setempat yang boleh mengendalikan kedua-dua data abjad dan angka .
• Baris yang diisih dimasukkan semula ke dalam jadual dalam susunan yang dikemas kini.

Butiran Pelaksanaan

1. Menentukan Nilai Sel: Fungsi 'getCellValue' digunakan untuk mendapatkan teks dalaman atau kandungan sel tertentu, bergantung pada sokongan penyemak imbas.
2. Mentakrifkan Pembanding: Pembanding ' ' fungsi mencipta fungsi pengisihan yang mengambil kira indeks lajur dan Boolean yang menunjukkan tertib menaik atau menurun. Ia menggunakan perbandingan rentetan sedar setempat dan menyokong pengisihan abjad dan angka.
3. Pengendalian Peristiwa: Setiap sel pengepala mempunyai pendengar acara klik yang mencetuskan proses pengisihan. Sifat 'asc' digunakan untuk menogol antara tertib menaik dan menurun.
4. Isih Baris: Kaedah 'Array.from' digunakan untuk menukar koleksi baris kepada tatasusunan. Tatasusunan kemudian diisih menggunakan fungsi 'pembanding', dengan indeks lajur diperoleh daripada pengepala yang diklik.
5. Mengemas kini Jadual: Selepas mengisih, baris yang diubah suai dimasukkan semula ke dalam jadual, mengemas kini kandungannya dengan berkesan.

Keteguhan dan Keserasian

Penyelesaian yang disediakan direka untuk menjadi teguh dan serasi dengan penyemak imbas popular, termasuk Chrome, Firefox dan Safari. Untuk sokongan IE11, menetapkan gaya 'table.style.whiteSpace = 'nowrap'' mungkin diperlukan.

Contoh Penggunaan

HTML dan CSS yang disediakan menunjukkan cara untuk gunakan skrip pengisihan pada jadual HTML mudah. Mengklik sel pengepala harus mencetuskan fungsi pengisihan seperti yang diterangkan sebelum ini.

Dengan menggunakan penyelesaian JavaScript ini, pembangun boleh menambahkan keupayaan pengisihan jadual asas dengan mudah pada halaman HTML mereka, meningkatkan persembahan data dan menjadikannya lebih mudah untuk pengguna berinteraksi dengan kandungan jadual.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pengisihan Jadual JavaScript Asas untuk Pengalaman Pengguna yang Dipertingkatkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!