// 将JSON数据转换为HTML表格的函数
function jsonToHTMLTable(jsonData) {
// 创建表格的HTML字符串
let table = '<table>';
// 添加表头
table += '<thead><tr>';
for (let key in jsonData[0]) {
table += `<th>${key}</th>`;
}
table += '</tr></thead>';
// 添加表格数据行
table += '<tbody>';
jsonData.forEach(function (row) {
table += '<tr>';
for (let key in row) {
table += `<td>${row[key]}</td>`;
}
table += '</tr>';
});
table += '</tbody>';
// 结束表格标签
table += '</table>';
// 返回生成的HTML表格
return table;
}
// 示例JSON数据
const jsonData = [
{ Name: 'Alice', Age: 25, Country: 'USA' },
{ Name: 'Bob', Age: 30, Country: 'UK' },
{ Name: 'Charlie', Age: 35, Country: 'France' }
];
// 使用函数转换JSON数据
const table = jsonToHTMLTable(jsonData);
// 输出表格或将其插入到DOM中
console.log(table);
// document.body.innerHTML += table;
这段代码定义了一个jsonToHTMLTable
函数,它接受一个JSON对象数组作为参数,并返回一个字符串,该字符串是一个HTML表格。这个表格包括表头,每个JSON对象的键作为表头,以及表格主体,每行对应一个JSON对象。这个函数可以用来快速将JSON数据转换为可在网页上显示的HTML表格。