資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery 從 JSON 檔案中獲取資料並在 HTML 表格中顯示？
JSON (JavaScript 物件表示法) 已經流行起來，它提供了一種輕量級且易於閱讀的佈局，用於在伺服器和 Web 應用程式之間交換資訊。藉助 jQuery（一個有效的 JavaScript 庫），您可以輕鬆地從 JSON 檔案中獲取資料並在 HTML 表格中顯示它。要本地執行程式碼，需要一個 Web 伺服器。或者，可以使用帶有即時伺服器外掛的程式碼編輯器。
語法
$.getJSON()
可以使用 AJAX 請求透過此函式從檔案中檢索 JSON 資料。
該函式接受兩個引數
URL：第一個引數是我們要從中檢索資料的 JSON 檔案或 API 端點的 URL。它可以是相對 URL 或絕對 URL。
資料：第二個引數是一個可選引數，允許我們向請求傳送更多資料。此引數可以是物件或查詢字串格式的字串。
$.each(data, function(index, item)
回撥函式使用此方法對每個 JSON 陣列元素執行操作。index 和 item 引數分別表示陣列中的當前索引和物件。您可以在 $.each() 迴圈中執行操作或訪問 item 物件的屬性。
示例
提供的程式碼是一個 HTML 文件，它使用 JavaScript 和 jQuery 在 HTML 表格中顯示 JSON 資料。它從名為“jsonexdata.json”的檔案接收 JSON 資料，並根據資料動態生成表格行和列。
建立 JSON 檔案
建立一個名為 jasonexdata.json 的單獨檔案，並使用 JSON 格式填充示例資料。在本例中，我們假設 JSON 記錄包含一個專案陣列，每個專案代表一個人的資訊及其投資金額。
為了確保程式碼正常工作，我們需要將“jsonexdata.json”檔案放在與 HTML 檔案相同的目錄中。
示例
[
{
"name": "Neehar peter",
"email": "peterk36@gmail.com",
"phone": "693-857-4120",
"investment": "$5,200"
},
{
"name": "Youssef Ibrahim",
"email": "youssef221@ymail.com",
"phone": "384-726-9150",
"investment": "$7,500"
},
{
"name": "Rajesh Kumar",
"email": "rajesh@outlook.com",
"phone": "246-135-7908",
"investment": "$3,250"
},
{
"name": "Mukesh Ratan",
"email": "ratanm.23@hotmail.com",
"phone": "570-912-6384",
"investment": "$10,300"
}
]
演算法
<table> 元素構成表格，其 id 屬性命名為“data-table”。
表頭在 <thead> 標籤內定義，包含四列：“姓名”、“郵箱”、“電話”和“投資”。
表體在 <tbody> 標籤內定義。JSON 資料將動態插入此處。
<script> 標籤包含 jQuery 程式碼。
此函式等待 DOM 載入過程完成後再執行程式碼。
$.getJSON() 函式用於從“jsonexdata.json”檢索 JSON 資料。
使用 $.each() 函式迭代檢索到的資料。
對於 JSON 資料中的每個 person 物件，都會建立一個新的表格行 (<tr>)。
建立表格單元格 (<td>) 並用 person 物件中的相應資料填充。
透過 tableBody.append(row) 方法將行新增到表體中。
示例
<!DOCTYPE html>
<html>
<head>
<title>Example:Display json Data to HTML Table</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* CSS styles for the page */
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
border: 2px double #ddd;
}
th, td {
padding: 10px 15px;
text-align: left;
color: #fff; /* Set the text color for table cells */
border: 2px double #ddd;
background-color: #454b4e; /* Set your desired color here */
font-size: 24px;
}
th {
background-color: #f2f2f2;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #333; /* Set the text color for table headers */
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>JSON Data to HTML Table</h1>
<table id="data-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Investment</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- JavaScript code using jQuery -->
<script>
$(document).ready(function() {
// Retrieve JSON data from "jsonexdata.json" file
$.getJSON("jsonexdata.json", function(data) {
var tableBody = $("#data-table tbody");
// Iterate over each person object in the JSON data
$.each(data, function(index, person) {
var row = $("<tr></tr>"); // Create a new table row
// Create table cells and fill them with the person's data
row.append($("<td></td>").text(person.name));
row.append($("<td></td>").text(person.email));
row.append($("<td></td>").text(person.phone));
row.append($("<td></td>").text(person.investment));
tableBody.append(row); // Add the row to the table body
});
});
});
</script>
</body>
</html>
結論
從 JSON 檔案獲取資料可以動態且即時地更新 HTML 表格中的資料。使用 JSON 檔案可以輕鬆地重用和共享資料，而無需在不同的頁面或元件之間進行任何麻煩。
資料重用能力簡化了資料管理並簡化了應用程式開發，在處理不同的資料需求時能夠實現可擴充套件性。
2000+ 次瀏覽
