Bagaimanakah jQuery Boleh Digunakan untuk Menukar Data JSON dengan Cekap ke dalam Jadual HTML?-tutorial js-php.cn

Bagaimanakah jQuery Boleh Digunakan untuk Menukar Data JSON dengan Cekap ke dalam Jadual HTML?

DDD

Lepaskan： 2024-11-28 15:55:11

asal

965 orang telah melayarinya

How Can jQuery Be Used to Efficiently Convert JSON Data into HTML Tables?

Menukar Data JSON ke dalam Jadual HTML: Penyelesaian Menggunakan jQuery

Apabila bekerja dengan data dinamik, keperluan untuk memaparkannya dalam format jadual sering timbul. Walaupun menjana jadual HTML secara manual daripada data JSON adalah mungkin, ia boleh memakan masa. Di sinilah perpustakaan jQuery bersinar.

jQuery: A Library for Dynamic Table Generation

jQuery menawarkan penyelesaian yang berkuasa untuk menjana jadual daripada data JSON. Dengan memanfaatkan fleksibiliti dan kemudahan penggunaannya, pembangun boleh membuat jadual dengan usaha yang minimum. Kuncinya ialah untuk mengendalikan pengekstrakan pengepala lajur dan populasi sel jadual secara dinamik.

Mengekstrak Pengepala Lajur Secara Dinamik

Pengepala lajur mewakili kekunci objek dalam data JSON. Untuk mengekstraknya dengan cekap, anda boleh menggunakan gelung untuk melelaran melalui objek dan mengumpul semua kunci unik. Ini memastikan bahawa jadual mempunyai semua lajur yang diperlukan.

Mengisi Sel Jadual

Selepas mengekstrak pengepala lajur, langkah seterusnya ialah mengisi sel jadual dengan yang sepadan nilai. Ini boleh dilakukan dengan mengulangi data JSON sekali lagi dan mengakses nilai untuk setiap pengepala lajur. Jika nilai tiada, ia boleh digantikan dengan rentetan kosong.

Contoh Kod

Berikut ialah coretan kod yang menunjukkan pendekatan yang dibincangkan di atas:

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

// Adds a header row to the table and returns the set of columns.
function addAllColumnHeaders(myList, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr>');

  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

Salin selepas log masuk

Demonstrasi

Untuk menunjukkan kefungsian, anda boleh menambah coretan kod ini pada halaman HTML bersama-sama dengan perpustakaan jQuery yang diperlukan. HTML berikut akan memaparkan jadual:

<body onLoad="buildHtmlTable('#excelDataTable')">
  <table>

Salin selepas log masuk

Kod ini akan menjana jadual dinamik daripada data JSON, secara automatik mengekstrak pengepala lajur dan mengisi sel jadual. Dengan menggunakan keupayaan berkuasa jQuery, anda boleh membentangkan data JSON anda dalam format jadual dengan mudah.

Atas ialah kandungan terperinci Bagaimanakah jQuery Boleh Digunakan untuk Menukar Data JSON dengan Cekap ke dalam Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!