JSON（JavaScript 对象表示法）是一种功能强大的数据格式，用于在服务器和客户端之间交换数据。 HTML 表格是以表格格式表示数据的强大工具，使其变得非常易于阅读、分析和比较。在 Web 开发中，将 JSON 数据转换为 HTML 表格是很常见的。
在本文中，我们将学习如何使用 Javascript 和 jQuery 将 JSON 数据转换为 HTML 表格。读完本文后，您将对 JSON 到 HTML 表的转换有深入的了解。
使用 JavaScript 将 JSON 数据转换为 HTML 表格
以下是使用 JSON 数据创建 HTML 表的步骤。
创建一个名为“convert”的函数。
创建示例 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>
登录后复制
以上是如何使用 JavaScript/jQuery 将 JSON 数据转换为 html 表？的详细内容。更多信息请关注PHP中文网其他相关文章！
