使用嵌套的JSON数据创建HTML表可以通过以下步骤实现:
以下是一个示例代码,演示如何使用嵌套的JSON数据创建HTML表格:
// 嵌套的JSON数据
var jsonData = [
{
"Name": "John",
"Age": 30,
"City": "New York"
},
{
"Name": "Jane",
"Age": 25,
"City": "London"
},
{
"Name": "Tom",
"Age": 35,
"City": "Tokyo"
}
];
// 解析JSON数据
var data = JSON.parse(jsonData);
// 创建表格元素
var table = document.createElement("table");
// 创建表头元素
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
// 添加表头单元格
for (var key in data[0]) {
var headerCell = document.createElement("th");
headerCell.textContent = key;
headerRow.appendChild(headerCell);
}
// 将表头行添加到表头元素
thead.appendChild(headerRow);
// 创建表体元素
var tbody = document.createElement("tbody");
// 添加表格行和单元格
data.forEach(function(obj) {
var row = document.createElement("tr");
for (var key in obj) {
var cell = document.createElement("td");
cell.textContent = obj[key];
row.appendChild(cell);
}
// 将表格行添加到表体元素
tbody.appendChild(row);
});
// 将表头和表体添加到表格
table.appendChild(thead);
table.appendChild(tbody);
// 将表格添加到HTML页面的指定容器
document.getElementById("table-container").appendChild(table);
在上述示例代码中,我们首先解析了嵌套的JSON数据,然后使用JavaScript动态创建了一个HTML表格。通过遍历JSON数据中的对象,我们将属性作为表头单元格添加到表头行中,将属性值作为表格行的单元格添加到表体中。最后,将表格添加到HTML页面的指定容器中。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云