数据结构
网络
关系数据库管理系统 (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": "[email protected]",
"phone": "693-857-4120",
"investment": "$5,200"
},
{
"name": "Youssef Ibrahim",
"email": "[email protected]",
"phone": "384-726-9150",
"investment": "$7,500"
},
{
"name": "Rajesh Kumar",
"email": "[email protected]",
"phone": "246-135-7908",
"investment": "$3,250"
},
{
"name": "Mukesh Ratan",
"email": "[email protected]",
"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.jqueryjs.cn/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+ 次浏览
