JSON（JavaScript 對象表示法）是一種功能強大的數(shù)據(jù)格式，用于在服務(wù)器和客戶端之間交換數(shù)據(jù)。 HTML 表格是以表格格式表示數(shù)據(jù)的強大工具，使其變得非常易于閱讀、分析和比較。在 Web 開發(fā)中，將 JSON 數(shù)據(jù)轉(zhuǎn)換為 HTML 表格是很常見的。
在本文中，我們將學(xué)習(xí)如何使用 Javascript 和 jQuery 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 HTML 表格。讀完本文后，您將對 JSON 到 HTML 表的轉(zhuǎn)換有深入的了解。
使用 JavaScript 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 HTML 表格
以下是使用 JSON 數(shù)據(jù)創(chuàng)建 HTML 表的步驟。
創(chuàng)建一個名為“convert”的函數(shù)。
創(chuàng)建示例 JSON 數(shù)據(jù)。
使用 getElementByID(“container”) 獲取容器，我們將在其中追加表格。
獲取 JSON 數(shù)據(jù)的第一個對象的鍵，以便我們獲取表格的標題。
循環(huán)列名稱，創(chuàng)建標題單元格，并將列名稱設(shè)置為標題單元格的文本。
將標題單元格附加到標題行，然后將標題行附加到標題
將標題附加到表格
循環(huán) JSON 數(shù)據(jù)，創(chuàng)建表格行，使用 Object.values(item) 獲取 JSON 數(shù)據(jù)中當(dāng)前對象的值，并創(chuàng)建表格單元格。
將值設(shè)置為表格單元格的文本，將表格單元格附加到表格行，然后將表格行附加到表格。
示例
在此示例中，我們使用 Javascript 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 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>
登錄后復(fù)制
示例：使用 jQuery 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 HTML 表格
這里是使用 jQuery 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 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>
登錄后復(fù)制
以上就是如何使用 JavaScript/jQuery 將 JSON 數(shù)據(jù)轉(zhuǎn)換為 html 表？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
