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

将 JSON 数据转换为 HTML 表格

问题：

有没有办法从 JSON 动态生成 HTML 表格使用 jQuery 或JavaScript？

答案：

是的，有几个库可以帮助您实现这一目标。一种常见的选择是使用 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中文网其他相关文章！