Bagaimanakah Saya Boleh Menukar Tatasusunan JSON dengan Cekap kepada Jadual HTML Menggunakan 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>

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>

Kemudian, bungkus tbl_row = baris dengan tanda berikut:

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

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>

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!