Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2024-10-30 04:53:02
asal
526 orang telah melayarinya

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

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] ) {
...
}
Salin selepas log masuk

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

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!

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