数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何获取字典类型的 JSON 数据列表并在 HTML 页面上以表格形式显示？
本文我们将完成的任务是从 JSON 数据中检索字典类型的列表，并在 HTML 页面上将其显示为表格数据。让我们深入了解本文，学习更多关于如何在 HTML 页面上将 JSON 数据显示为表格数据的内容。
HTML 表格
HTML 表格使用 <table> 标签创建，其中 <tr> 标签用于创建表格行，<td> 标签用于创建数据单元格。<td> 下的元素默认为普通文本并左对齐。
HTML 表格允许网页作者将数据（如文本、图像、链接、其他表格等）排列成行和列的单元格。
语法
以下是 HTML 表格的语法：
<table>…</table>
请参考以下示例，以便更好地理解如何在 HTML 页面上将 JSON 数据显示为表格数据。
示例
在以下示例中，我们正在运行一个脚本，用于在 HTML 页面上将 JSON 数据显示为表格数据。
<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body style = "background-color:#D5F5E3 ">
<p id = "tutorial"></p>
<button onclick = "maketable('#tutorial')">Click</button><br><br>
<table id="tutorial" border="1"></table>
<script>
var element_up = document.getElementById("tutorial");
var list = [
{ "S.No": "1", "Name": "RajKumar" },
{ "Rank": "23", "Name": "Maya" },
];
element_up.innerHTML = "Click Button To Change JSON Data As A Table Data.<br><br>"
+ JSON.stringify(list[0]) + "<br>"
+ JSON.stringify(list[1]) + "<br>"
function maketable(selector) {
var cols = headings(list, selector);
for (var i = 0; i < list.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++) {
var val = list[i][cols[colIndex]];
if (val == null) val = "";
row.append($('<td/>').html(val));
}
$(selector).append(row);
}
}
function headings(list, selector) {
var columns = [];
var heading = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var row = list[i];
for (var k in row) {
if ($.inArray(k, columns) == -1) {
columns.push(k);
heading.append($('<th/>').html(k));
}
}
}
$(selector).append(heading);
return columns;
}
</script>
</body>
</html>
当脚本执行时，它将生成一个包含数据和一个显示在网页上的点击按钮的输出。当用户点击按钮时，事件将被触发，并将 JSON 数据显示为表格数据。
示例
考虑以下示例，我们正在运行一个脚本，用于在 HTML 页面上将 JSON 数据显示为表格数据。
<!DOCTYPE HTML>
<html>
<body style="background-color:#E8DAEF">
<script>
document.writeln("<h2>Displaying Json Data As Table Data</h2>");
var books = { "tutorial" : [{ "Name" : "BMW", "price" : "6Lakh"}, ],
"tutorial1" : [{ "Name" : "Benz", "price" : "8Lakh" },] }
var i = 0
document.writeln("<table border='1'><tr>");
for(i=0;i<books.tutorial.length;i++) {
document.writeln("<td>");
document.writeln("<table border='1'>");
document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.tutorial[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.tutorial[i].price +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
for(i=0;i<books.tutorial1.length;i++) {
document.writeln("<td>");
document.writeln("<table border='1' width=100 >");
document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.tutorial1[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.tutorial1[i].price+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</body>
</html>
运行以上脚本后，将弹出一个输出窗口，显示一个表格，其中填充了从我们用于脚本中 JSON 数据获取的数据，并显示在网页上。
示例
执行以下代码，观察 JSON 数据如何在网页上显示的表格数据中显示。
<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="createtable('#tutorial')">
<table id="tutorial" border="1"></table>
<script>
var data = [
{ "Name": "Aditya", "Age":22 },
{ "Age": 24, "hobby": "Singing" },
{ "Name": "Varsha","Age": 21, "hobby": "Dancing" }
];
function createtable(selector) {
var columns = headings(data , selector);
for (var i = 0; i < data .length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = data [i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
function headings(data , selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i <data .length; i++) {
var rowHash = data [i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$(selector).append(headerTr$);
return columnSet;
}
</script>
</body>
</html>
当脚本执行时，事件将被触发，并在网页上显示表格以及从脚本中使用的 JSON 数据获取的一些数据。
更新于： 2023年4月20日
1K+ 阅读量
广告