Rumah >hujung hadapan web >tutorial js >Bagaimanakah jQuery Boleh Memudahkan Menukar Data JSON ke dalam Jadual HTML?

Bagaimanakah jQuery Boleh Memudahkan Menukar Data JSON ke dalam Jadual HTML?

Linda Hamilton
Linda Hamiltonasal
2024-10-27 20:35:30994semak imbas

How Can jQuery Simplify Converting JSON Data into HTML Tables?

Pendekatan Ringkas jQuery untuk JSON kepada Penukaran Jadual HTML

Menukar tatasusunan JSON ke dalam jadual HTML boleh menjadi tugas yang membosankan, tetapi jQuery memudahkan proses secara dramatik.

Untuk menjana jadual daripada tatasusunan JSON, gunakan fungsi getJSON() untuk mendapatkan semula data:

$.getJSON(url , function(data) {

Seterusnya, buat badan jadual:

var tbl_body = "";

Lelaran pada baris dan lajur tatasusunan JSON untuk mencipta sel jadual:

$.each(data, function() {
    var tbl_row = "";
    $.each(this, function(k , v) {
        tbl_row += "<td>"+v+"</td>";
    });

Kecualikan medan tertentu dengan menambahkan objek untuk menyemak kekunci yang akan ditinggalkan:

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };

Tambahkan syarat if untuk menyemak kunci yang akan dikecualikan:

if ( ( k in expected_keys ) &amp;&amp; expected_keys[k] ) {
...
}

Tambahkan badan jadual pada elemen HTML sasaran:

$("#target_table_id tbody").html(tbl_body);

Sebagai alternatif, untuk keselamatan yang dipertingkatkan, gunakan suntikan -versi percuma di bawah:

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
    });            
    $("#target_table_id").append(tbl_body);   
});

Atas ialah kandungan terperinci Bagaimanakah jQuery Boleh Memudahkan Menukar Data JSON ke dalam Jadual HTML?. 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