ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用して JSON データから HTML テーブルを生成するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-02 21:00:16
オリジナル
461 人が閲覧しました

How Can I Generate an HTML Table from JSON Data Using JavaScript?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート