Bagaimana Mengisih Jadual HTML Mengikut Abjad dengan JavaScript?

Mengisih Jadual HTML dengan JavaScript

Ramai pembangun mencari penyelesaian JavaScript untuk mengisih jadual. Penyelesaian yang mudah dan berkesan ialah mengisih setiap lajur mengikut abjad. Penyelesaian ini sesuai dengan keperluan untuk mengabaikan kod, nombor atau mata wang dan fokus pada teks.

Ikhtisar Penyelesaian

Penyelesaian ini melibatkan penambahan acara klik pada setiap sel pengepala . Untuk jadual masing-masing, ia mencari semua baris (kecuali yang pertama) dan mengisihnya berdasarkan nilai lajur yang diklik. Setelah diisih, ia memasukkan semula baris ke dalam jadual dalam susunan baharu.

Butiran Pelaksanaan

1. Pengendalian Acara: Tambah acara klik ke semua sel ke.
2. Pendapatan Baris: Ekstrak semua baris kecuali yang pertama (tr:nth-child(n 2)) daripada jadual yang diklik.
3. Logik Isih: Buat pembanding fungsi isihan yang mengambil dua hujah: idx indeks lajur dan bendera asc. Fungsi ini mengisih baris berdasarkan kandungan teks lajur yang diklik.
4. Kemas Kini Jadual: Selepas mengisih baris, tambahkannya semula ke dalam jadual dalam susunan baharu.

Contoh Kod dalam JavaScript dan HTML

<code class="javascript">const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// Event Handling
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));</code>

<code class="html"><table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
    <tr><td>spain</td><td>2005-05-05</td><td></td></tr>
    <tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
    <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table></code>

Penyelesaian ini dengan cekap mengisih jadual HTML mengikut abjad dengan satu klik pada pengepala lajur, tanpa sebarang kebergantungan luaran. Kesederhanaan dan keserasiannya dengan penyemak imbas utama menjadikannya pilihan yang sesuai untuk banyak keperluan pengisihan.

Atas ialah kandungan terperinci Bagaimana Mengisih Jadual HTML Mengikut Abjad dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!