jQuery を使用して JSON データを HTML テーブルに効率的に変換するにはどうすればよいですか?
JSON データを HTML テーブルに変換: jQuery を使用したソリューション
動的データを扱う場合、テーブル形式で表示する必要があるということがよく起こります。 JSON データから HTML テーブルを手動で生成することも可能ですが、時間がかかる場合があります。ここで jQuery ライブラリが威力を発揮します。
jQuery: 動的テーブル生成用ライブラリ
jQuery は、JSON データからテーブルを生成するための強力なソリューションを提供します。その柔軟性と使いやすさを活用することで、開発者は最小限の労力でテーブルを作成できます。重要なのは、列ヘッダーの抽出とテーブル セルの作成を動的に処理することです。
列ヘッダーの動的抽出
列ヘッダーは、テーブル内のオブジェクトのキーを表します。 JSONデータ。それらを効率的に抽出するには、ループを使用してオブジェクトを反復処理し、すべての一意のキーを収集します。これにより、テーブルに必要な列がすべて確実に含まれるようになります。
テーブル セルの設定
列ヘッダーを抽出した後、次のステップでは、テーブルのセルに対応する列を設定します。価値観。これは、JSON データを再度反復処理し、各列ヘッダーの値にアクセスすることで実行できます。値が欠落している場合は、空の文字列に置き換えることができます。
コード例
次に、上で説明したアプローチを示すコード スニペットを示します。
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$);
}
}デモンストレーション
デモンストレーションを行うには機能を利用するには、このコード スニペットを必要な jQuery ライブラリとともに HTML ページに追加できます。次の HTML はテーブルを表示します:
<body onLoad="buildHtmlTable('#excelDataTable')">
<table>このコードは、JSON データから動的テーブルを生成し、列ヘッダーを自動的に抽出し、テーブル セルに値を設定します。 jQuery の強力な機能を利用すると、JSON データを表形式で簡単に表示できます。
以上がjQuery を使用して JSON データを HTML テーブルに効率的に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7315
9
1625
14
1348
46
1260
25
1207
29
