JavaScript を使用して JSON データから HTML テーブルを生成するにはどうすればよいですか?

JSON データを HTML テーブルに変換する

質問:

JSON から HTML テーブルを動的に生成する方法はありますかjQueryを使用したデータまたはJavaScript?

答え:

はい、これを実現するのに役立つライブラリがいくつかあります。一般的なオプションの 1 つは、jQuery DataTables プラグイン を使用することです。ただし、ライブラリを使用したくない場合は、純粋な JavaScript を使用して独自のテーブルを作成することもできます。

JavaScript コード:

ここに JavaScript コード スニペットを示します。 JSON データから HTML テーブルを構築します:

// 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);

このコードは、JSON リスト内のすべてのオブジェクトが同じキーのセットを持つことを前提としています。そうでない場合は、不足しているキーを処理するために追加のロジックを追加する必要がある場合があります。

以上がJavaScript を使用して JSON データから HTML テーブルを生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。