Bagaimanakah Saya Boleh Menukar Tatasusunan JSON dengan Cekap ke dalam Jadual HTML Menggunakan jQuery?

Mencipta Jadual HTML daripada Tatasusunan JSON Menggunakan jQuery

Adakah anda tertanya-tanya tentang cara yang cekap untuk menukar tatasusunan objek JSON kepada jadual HTML dalam jQuery? Jangan cari lagi!

jQuery menawarkan penyelesaian yang mudah untuk mengautomasikan tugasan ini, tidak termasuk medan tertentu jika dikehendaki.

Langkah-Langkah untuk Menukar JSON kepada Jadual HTML

1. Mulakan dengan tatasusunan JSON yang mengandungi data yang anda mahu paparkan.
2. Gunakan kaedah $.getJSON() untuk mendapatkan semula data JSON daripada URL atau sebagai objek JavaScript.
3. Di dalam fungsi panggil balik, cipta pembolehubah untuk menahan badan jadual yang dijana (tbl_body).
4. Lelaran melalui setiap objek JSON dalam tatasusunan.
5. Untuk setiap objek, hasilkan baris jadual (tbl_row ) dan lelaran melalui medannya.
6. Di dalam gelung dalam, tambahkan sel HTML () untuk setiap medan, tidak termasuk mana-mana yang anda tidak mahu dalam jadual.
7. Tambah baris jadual yang dijana ke badan jadual.
8. Togol kelas "ganjil" atau "genap" untuk setiap baris untuk memberikan perbezaan visual.
9. Akhir sekali, tambahkan badan jadual pada jadual HTML sasaran elemen pada halaman anda menggunakan $("#target_table_id tbody").html(tbl_body).

Tidak Termasuk Medan Khusus

Anda boleh mengecualikan medan tertentu dengan mudah daripada jadual yang dijana dengan menyemak sama ada setiap kunci medan wujud dalam objek yang mengandungi kunci yang dijangkakan. Jika kunci wujud dan ditetapkan kepada palsu, kecualikan medan yang sepadan daripada jadual.

Kod Contoh

<code class="javascript">$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});</code>

Sampel kod ini menukar data tatasusunan JSON menjadi jadual, dengan kelas baris "ganjil" dan "genap" berselang-seli untuk kebolehbacaan yang lebih baik. Jangan ragu untuk mengubah suai dan menyesuaikannya lagi untuk memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Tatasusunan JSON dengan Cekap ke dalam Jadual HTML Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!