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

Linda Hamilton
Lepaskan: 2024-10-27 20:35:30
asal
891 orang telah melayarinya

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

Seterusnya, buat badan jadual:

var tbl_body = "";
Salin selepas log masuk

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

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

Tambahkan syarat if untuk menyemak kunci yang akan dikecualikan:

if ( ( k in expected_keys ) &amp;&amp; expected_keys[k] ) {
...
}
Salin selepas log masuk

Tambahkan badan jadual pada elemen HTML sasaran:

$("#target_table_id tbody").html(tbl_body);
Salin selepas log masuk

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

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!

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!