Bagaimanakah Saya Boleh Menjana Jadual HTML daripada Data JSON Menggunakan JavaScript?

Tukar Data JSON kepada Jadual HTML

Soalan:

Adakah terdapat cara untuk menjana jadual HTML secara dinamik daripada JSON data menggunakan jQuery atau JavaScript?

Jawapan:

Ya, terdapat beberapa perpustakaan yang boleh membantu anda mencapai perkara ini. Satu pilihan biasa ialah menggunakan pemalam jQuery DataTables. Walau bagaimanapun, jika anda memilih untuk tidak menggunakan mana-mana perpustakaan, anda juga boleh mencipta jadual anda sendiri menggunakan JavaScript tulen.

Kod JavaScript:

Berikut ialah coretan kod JavaScript untuk bina jadual HTML daripada data JSON:

// JSON data
var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Build the table
var table = document.createElement('table');
var headerRow = document.createElement('tr');

// Add header row with column names
for (var key in myList[0]) {
  var th = document.createElement('th');
  th.textContent = key;
  headerRow.appendChild(th);
}
table.appendChild(headerRow);

// Add data rows
for (var i = 0; i < myList.length; i++) {
  var row = document.createElement('tr');
  for (var key in myList[i]) {
    var td = document.createElement('td');
    td.textContent = myList[i][key];
    row.appendChild(td);
  }
  table.appendChild(row);
}

// Append the table to the DOM
document.body.appendChild(table);

Kod ini menganggap bahawa semua objek dalam senarai JSON mempunyai set yang sama kunci. Jika ini tidak berlaku, anda mungkin perlu menambah logik tambahan untuk mengendalikan kekunci yang hilang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjana Jadual HTML daripada Data JSON Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!