jQuery を使用して JSON データを HTML テーブルに効率的に変換するにはどうすればよいですか?-jsチュートリアル-php.cn

jQuery を使用して JSON データを HTML テーブルに効率的に変換するにはどうすればよいですか?

DDD

リリース： 2024-11-28 15:55:11

オリジナル

1017 人が閲覧しました

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

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