JSON (JavaScript Object Notation) ialah format data berkuasa yang digunakan untuk bertukar-tukar data antara pelayan dan pelanggan. Jadual HTML ialah alat yang berkuasa untuk mewakili data dalam format jadual, menjadikannya sangat mudah untuk dibaca, dianalisis dan dibandingkan. Dalam pembangunan web, adalah perkara biasa untuk menukar data JSON ke dalam jadual HTML.
Dalam artikel ini, kita akan belajar cara menukar data JSON ke dalam jadual HTML menggunakan Javascript dan jQuery. Selepas membaca artikel ini, anda akan mempunyai pemahaman yang kukuh tentang penukaran jadual JSON kepada HTML.
Berikut ialah langkah untuk membuat jadual HTML menggunakan data JSON.
Buat fungsi yang dipanggil "tukar".
Buat sampel data JSON.
Gunakan getElementByID("bekas") untuk mendapatkan bekas yang akan kami tambahkan jadual.
Dapatkan kunci objek pertama data JSON supaya kita boleh mendapatkan tajuk jadual.
Gelung nama lajur, buat sel pengepala dan tetapkan nama lajur pada teks sel pengepala.
Tambahkan sel pengepala pada baris pengepala dan kemudian tambahkan baris pengepala ke pengepala
Tambahkan tajuk pada jadual
Gelung melalui data JSON, buat baris jadual, gunakan Object.values(item) untuk mendapatkan nilai objek semasa dalam data JSON dan buat sel jadual.
Tetapkan nilai pada teks sel jadual, tambahkan sel jadual pada baris jadual, dan kemudian tambahkan baris jadual pada jadual.
Dalam contoh ini, kami menggunakan Javascript untuk menukar data JSON kepada jadual 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>
Berikut ialah kod untuk menukar data JSON ke dalam jadual HTML menggunakan jQuery.
<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>
Atas ialah kandungan terperinci Bagaimana untuk menukar data JSON ke jadual html menggunakan JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
tingkap.prompt
Apa yang perlu dilakukan jika sambungan win8wifi tidak tersedia
Bagaimana untuk memulihkan pangkalan data mysql
Bagaimana untuk menyelesaikan akses ditolak
Bagaimana untuk mengekstrak audio daripada video dalam java
Penyelesaian skrin hitam permulaan Ubuntu
Apakah kad kad TF?
Bagaimana untuk menukar phpmyadmin kepada bahasa Cina
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
