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

Patricia Arquette
Lepaskan: 2024-10-30 05:15:03
asal
850 orang telah melayarinya

 How Can I Efficiently Convert JSON Arrays to HTML Tables Using jQuery?

Penukaran Mudah Tatasusunan JSON kepada Jadual HTML Menggunakan jQuery

Apabila berhadapan dengan tugas menukar tatasusunan objek JSON ke dalam jadual HTML, kerumitan proses boleh menakutkan. Nasib baik, jQuery memudahkan proses ini dengan ketara.

Memanfaatkan jQuery untuk Mengautomasikan Penciptaan Jadual

Kod jQuery yang disediakan menyelaraskan proses penukaran dengan melelaran melalui setiap objek JSON dalam tatasusunan dan menjana baris jadual yang sepadan secara dinamik dan sel:

<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>
Salin selepas log masuk

Mengecualikan Medan Khusus (Pilihan)

Untuk mengecualikan medan tertentu daripada jadual, cuma buat objek dengan namanya sebagai kunci dan nilai benar/salah untuk menunjukkan kemasukan atau pengecualian:

<code class="javascript">var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };</code>
Salin selepas log masuk

Kemudian, bungkus tbl_row = baris dengan tanda berikut:

<code class="javascript">if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}</code>
Salin selepas log masuk

Alternatif Tanpa Suntikan

Untuk pendekatan yang lebih terpencil, pertimbangkan ini Penyelesaian berasaskan DOM:

<code class="javascript">$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});</code>
Salin selepas log masuk

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!