Rumah >hujung hadapan web >tutorial js >Bagaimanakah jQuery Boleh Memudahkan Menukar Data JSON ke dalam Jadual HTML?
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 ) && 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!