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 表？的詳細內容，更多請關注www.92cms.cn其它相關文章！
