如何使用 JavaScript/jQuery 將 JSON 資料轉換為 html 表？
- PHPz轉載
- 2023-09-10 08:13:151458瀏覽
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中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除