Cara Isih Jadual HTML dengan JavaScript: Penyelesaian Komprehensif

Mengisih Jadual HTML dengan JavaScript: Penyelesaian Mudah Dilawati Semula

Mencari penyelesaian pengisihan jadual yang sesuai dalam JavaScript boleh menjadi satu cabaran. Anda mungkin perlu mengisih lajur mengikut abjad, termasuk nombor, tetapi tanpa mengabaikan aksara tertentu atau mengendalikan mata wang.

Nasib baik, terdapat penyelesaian JavaScript yang mudah dan berkesan yang boleh membantu:

JavaScript biasa (ES6):

• Menyokong pengisihan alfa dan angka dalam tertib menaik dan menurun
• Berfungsi dalam Chrome, Firefox, Safari dan juga IE11

Butiran Pelaksanaan:

1. Tambahkan pendengar acara klik pada setiap sel pengepala jadual (th).
2. Dapatkan semula semua baris jadual (kecuali yang pertama ) untuk jadual.
3. Isih baris berdasarkan nilai lajur yang diklik.
4. Masukkan semula baris yang diisih kembali ke dalam jadual.

Coretan Kod:

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

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

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>

Penggayaan:

Tambah CSS berikut untuk menggayakan jadual dan menjadikan sel pengepala boleh diklik:

<code class="css">table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}</code>

Penggunaan:

Sertakan JavaScript dan CSS dalam dokumen HTML anda dan tambahkan jadual dengan sel pengepala dan baris data.

Contoh:

<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><i>25</i></td></tr>
    <tr><td><a href="#">spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href="#">2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href="#">100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table></code>

Kesimpulan:

Dengan penyelesaian JavaScript yang mudah dan cekap ini, anda boleh mengisih jadual HTML dengan mudah dengan satu klik pada pengepala lajur, tanpa mengira data taip.

Atas ialah kandungan terperinci Cara Isih Jadual HTML dengan JavaScript: Penyelesaian Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!