資料結構
網路
關係型資料庫管理系統
作業系統
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.com/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.com/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+ 閱讀量
廣告