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ù)的第一個對象的鍵，以便我們獲取表格的標(biāo)題。
循環(huán)列名稱，創(chuàng)建標(biāo)題單元格，并將列名稱設(shè)置為標(biāo)題單元格的文本。
將標(biāo)題單元格附加到標(biāo)題行，然后將標(biāo)題行附加到標(biāo)題
將標(biāo)題附加到表格
循環(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)文章！
