輕松將 JSON 數(shù)據(jù)轉(zhuǎn)換為 HTML 表格

在當(dāng)今的 Web 開發(fā)中，從 JSON 數(shù)據(jù)動(dòng)態(tài)生成表格是一項(xiàng)常見任務(wù)。但是，如果您想自動(dòng)化此過程而不手動(dòng)定義列怎么辦？

介紹 JavaScript 庫

幸運(yùn)的是，有一些 JavaScript 庫可以簡(jiǎn)化此任務(wù)。流行的 jQuery 就是這樣的庫之一。它提供了一種基于 JSON 數(shù)據(jù)構(gòu)建動(dòng)態(tài)表的便捷方法，讀取鍵并相應(yīng)地生成列。

DIY 方法

當(dāng)然，您可以創(chuàng)建自己的方法JavaScript 解決方案（如果您愿意）。然而，利用現(xiàn)有的庫可以節(jié)省您的時(shí)間和精力，尤其是在處理更復(fù)雜的 JSON 結(jié)構(gòu)時(shí)。

代碼片段

對(duì)于那些喜歡 jQuery 方法的人，這里是一位用戶提供的代碼片段：

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

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

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

// Example Usage
$(document).ready(function() {
  buildHtmlTable('#excelDataTable');
});

此代碼片段演示了如何使用基于 jQuery 動(dòng)態(tài)生成 HTML 表格提供的 JSON 數(shù)據(jù)。 buildHtmlTable 函數(shù)會(huì)迭代 JSON 數(shù)據(jù)來創(chuàng)建行和列，而 addAllColumnHeaders 函數(shù)會(huì)識(shí)別所有唯一鍵來創(chuàng)建表頭。

通過此解決方案，您可以快速高效地將 JSON 數(shù)據(jù)轉(zhuǎn)換為具有視覺吸引力的格式具有動(dòng)態(tài)列生成功能的 HTML 表格。

以上是如何輕松將 JSON 數(shù)據(jù)轉(zhuǎn)換為 HTML 表格？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！