Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menukar Tatasusunan JSON ke dalam Jadual HTML dengan jQuery, Termasuk Keupayaan untuk Mengecualikan Medan Tertentu?

Bagaimana untuk Menukar Tatasusunan JSON ke dalam Jadual HTML dengan jQuery, Termasuk Keupayaan untuk Mengecualikan Medan Tertentu?

Barbara Streisand
Barbara Streisandasal
2024-10-30 04:53:02426semak imbas

How to Convert JSON Arrays into HTML Tables with jQuery, Including the Ability to Exclude Specific Fields?

Menukar Tatasusunan JSON kepada Jadual HTML dengan jQuery

Mentransformasikan tatasusunan objek JSON kepada jadual HTML boleh dicapai dengan cekap menggunakan jQuery.

Penyelesaian:

Coretan kod jQuery yang disediakan menukarkan tatasusunan objek JSON ke dalam jadual HTML, tidak termasuk medan tertentu:

<pre class="brush:php;toolbar:false">
$.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);
});

Untuk mengecualikan kekunci khusus, tambah logik ini sebelum tbl_row = baris:

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
if ( ( k in expected_keys ) &amp;&amp; expected_keys[k] ) {
...
}

Sebagai alternatif, pendekatan yang lebih selamat dan mesra DOM boleh digunakan:

<pre class="brush:php;toolbar:false">
$.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
});

Kaedah ini membolehkan anda dengan mudah tukar tatasusunan JSON ke dalam jadual HTML, dengan fleksibiliti untuk mengecualikan medan yang tidak diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Tatasusunan JSON ke dalam Jadual HTML dengan jQuery, Termasuk Keupayaan untuk Mengecualikan Medan Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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