极客教程JavaScript 如何将JSON数据转换为html表格
JSON（JavaScript对象符号）是一种强大的数据格式，可以从服务器到客户端交换数据，反之亦然。HTML表格是以表格格式表示数据的强大工具，因此它变得非常容易阅读、分析和比较。在网络开发中，将JSON数据转换为HTML表格是非常常见的。
在这篇文章中，我们将学习如何使用Javascript以及jQuery将JSON数据转换成HTML表格。在本文结束时，你将对JSON到HTML表的转换有一个坚实的了解。
使用JavaScript将JSON数据转换为HTML表格
下面是使用JSON数据创建HTML表格的步骤。
- 创建一个名为 “转换 “的函数。
-
创建一个JSON数据样本。
-
使用getElementByID(“container”)获取容器，我们将在这里追加表格。
-
获取JSON数据的第一个对象的键，这样我们就可以得到表格的标题。
-
循环浏览列名，创建标题单元，并将列名设置为标题单元的文本。
-
将标题单元格附加到标题行，然后将标题行附加到标题上
-
将表头附加到表格中
-
循环浏览JSON数据，创建表行，使用Object.values(item)获取JSON数据中当前对象的值，并创建表单元格。
-
将值设置为表格单元格的文本，将表格单元格追加到表格行中，然后将表格行追加到表格中。
例子
在这个例子中，我们正在使用Javascript将JSON数据转换为HTML表格。
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
}
</style>
</head>
<body>
<h2>Convert JSON data into a html table using Javascript</h2>
<p>Click the following button to convert JSON results into HTML table</p><br>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
<script>
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: "20",
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow",
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get the container element where the table will be inserted
let container = document.getElementById("container");
// Create the table element
let table = document.createElement("table");
// Get the keys (column names) of the first object in the JSON data
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = document.createElement("thead");
let tr = document.createElement("tr");
// Loop through the column names and create header cells
cols.forEach((item) => {
let th = document.createElement("th");
th.innerText = item; // Set the column name as the text of the header cell
tr.appendChild(th); // Append the header cell to the header row
});
thead.appendChild(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
jsonData.forEach((item) => {
let tr = document.createElement("tr");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
vals.forEach((elem) => {
let td = document.createElement("td");
td.innerText = elem; // Set the value as the text of the table cell
tr.appendChild(td); // Append the table cell to the table row
});
table.appendChild(tr); // Append the table row to the table
});
container.appendChild(table) // Append the table to the container element
}
</script>
</body>
</html>
例子。使用jQuery将JSON数据转换为HTML表格
下面是使用jQuery将JSON数据转换为HTML表格的代码。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
td, th {padding: 10px;}
</style>
</head>
<body>
<h2>Convert JSON data into a html table using Jquery</h2>
<p>Click the following button to convert JSON results into HTML table</p> <br>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
<script>
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: "20",
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow",
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get the container element where the table will be inserted
let container = ("#container");
// Create the table element
let table =("<table>");
// Get the keys (column names) of the first object in the JSON data
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = ("<thead>");
let tr =("<tr>");
// Loop through the column names and create header cells
.each(cols, function(i, item){
let th =("<th>");
th.text(item); // Set the column name as the text of the header cell
tr.append(th); // Append the header cell to the header row
});
thead.append(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
.each(jsonData, function(i, item){
let tr =("<tr>");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
.each(vals, (i, elem) => {
let td =("<td>");
td.text(elem); // Set the value as the text of the table cell
tr.append(td); // Append the table cell to the table row
});
table.append(tr); // Append the table row to the table
});
container.append(table) // Append the table to the container element
}
</script>
</body>
</html>