如何使用 JavaScript 从 JSON 数据动态生成 HTML 表？

使用 JavaScript 将 JSON 数据转换为 HTML 表

许多任务需要将 JSON 数据转换为交互式且可读的格式。这通常可以通过创建 HTML 表来完成。为了避免手动定义列和迭代数据的过程，请考虑利用 JavaScript 库进行动态表生成。

以下是如何使用自定义 JavaScript 解决方案实现此目的的示例：

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

// Building HTML Table
function buildHtmlTable(selector) {
  // Column Headers
  var columns = addAllColumnHeaders(myList, selector);

  // Table Rows
  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]] || "";
      row$.append($('<td>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adding Column Headers
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;
}

利用此自定义 JavaScript 解决方案，您可以从 JSON 数据动态生成 HTML 表格，而无需事先定义列。

以上是如何使用 JavaScript 从 JSON 数据动态生成 HTML 表？的详细内容。更多信息请关注PHP中文网其他相关文章！