给定一个包含JSON数据的HTML文档, 任务是将JSON数据转换为HTML表。
方法1:
- 将JSON对象放入变量中。
- 调用一个函数, 该函数首先将列名称添加到< table> 元素中(它正在查找所有列, 即列名称的UNION)。
- 遍历JSON数据并将键与列名匹配。将该键的值放在相应的列中。
- 如果该键没有值, 则将该列留空。
<
!DOCTYPE HTML>
<
html >
<
head >
<
title >
How to convert JSON data to a
html table using JavaScript ?
<
/ title >
<
script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" >
<
/ script >
<
/ head >
<
body style = "text-align:center;
" id = "body" >
<
h1 style = "color:green;
" >
lsbin
<
/ h1 >
<
p id = "GFG_UP" style =
"font-size: 15px;
font-weight: bold;
" >
<
/ p >
<
button onclick = "constructTable('#table')" >
click here
<
/ button >
<
br >
<
br >
<
table align = "center"
id = "table" border = "1" >
<
/ table >
<
script >
var el_up = document.getElementById("GFG_UP");
var list = [
{ "col_1": "val_11", "col_3": "val_13" }, { "col_2": "val_22", "col_3": "val_23" }, { "col_1": "val_31", "col_3": "val_33" }
];
el_up.innerHTML = "Click on the button to create "
+"the table from the JSON data.<
br >
<
br >
"
+ JSON.stringify(list[0]) + "<
br >
"
+ JSON.stringify(list[1]) + "<
br >
"
+ JSON.stringify(list[2]);
function constructTable(selector) {// Getting the all column names
var cols = Headers(list, selector);
// Traversing the JSON data
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 there is any key, which is matching
// with the column name
if (val == null) val = "" ;
row.append($('<
td/>
').html(val));
}// Adding each row to the table
$(selector).append(row);
}
}function Headers(list, selector) {
var columns = [];
var header = $('<
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);
// Creating the header
header.append($('<
th/>
').html(k));
}
}
}// Appending the header to the table
$(selector).append(header);
return columns;
}
<
/ script >
<
/ body >
<
/ html >
输出如下:
在单击按钮之前:
文章图片
单击按钮后:
文章图片
方法二:
- 将JSON对象存储到变量中。
- 首先将所有键放在列表中。
- 创建一个元素< table> 。
- 为表的标题创建一个< tr> 元素。
- 访问键列表, 为每个值创建一个< th> 并将其插入为标题创建的< tr> 元素中。
- 然后, 对于对象中的每个条目, 创建一个单元格并将其插入到特定行。
- 如果该键没有值, 则将该列留空。
<
!DOCTYPE HTML>
<
html >
<
head >
<
title >
How to convert JSON data to a html
table using JavaScript/jQuery ?
<
/ title >
<
script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" >
<
/ script >
<
/ head >
<
body style = "text-align:center;
" >
<
h1 style = "color:green;
" >
lsbin
<
/ h1 >
<
p id = "GFG_UP" style =
"font-size: 15px;
font-weight: bold;
" >
<
/ p >
<
button onclick = "GFG_FUN()" >
click here
<
/ button >
<
br >
<
br >
<
table id = "table" align = "center" border = "1px" >
<
/ table >
<
script >
var el_up = document.getElementById("GFG_UP");
var list = [
{"col_1":"val_11", "col_2":"val_12", "col_3":"val_13"}, {"col_1":"val_21", "col_2":"val_22", "col_3":"val_23"}, {"col_1":"val_31", "col_2":"val_32", "col_3":"val_33"}
];
el_up.innerHTML = "Click on the button to create the "
+ "table from the JSON data.<
br >
<
br >
"
+ JSON.stringify(list[0]) + "<
br >
"
+ JSON.stringify(list[1]) + "<
br >
"
+ JSON.stringify(list[2]);
function GFG_FUN() {
var cols = [];
for (var i = 0;
i <
list.length ;
i++) {
for (var k in list[i]) {
if (cols.indexOf(k) === -1) {// Push all keys to the array
cols.push(k);
}
}
}// Create a table element
var table = document .createElement("table");
// Create table row tr element of a table
var tr = table .insertRow(-1);
for (var i = 0 ;
i <
cols.length;
i++) {// Create the table header th element
var theader = document .createElement("th");
theader.innerHTML = cols [i];
// Append columnName to the table row
tr.appendChild(theader);
}// Adding the data to the table
for (var i = 0 ;
i <
list.length;
i++) {// Create a new row
trow = table .insertRow(-1);
for (var j = 0 ;
j <
cols.length;
j++) {
var cell = trow .insertCell(-1);
// Inserting the cell at particular place
cell.innerHTML = list [i][cols[j]];
}
}// Add the newely created table containing json data
var el = document .getElementById("table");
el.innerHTML = "" ;
el.appendChild(table);
}
<
/script>
<
/ body >
<
/ html >
输出如下:
【如何使用JavaScript / jQuery将JSON数据转换为html表()】在单击按钮之前:
文章图片
单击按钮后:
文章图片
推荐阅读
- C ++中的函数重载介绍
- Java String trim()方法与示例
- 如何使用JavaScript从html输入数组获取值()
- 文件目录中没有dev-server.js文件如何mock数据
- C语言简明教程(十九)(高级数据结构和算法详解)
- C语言简明教程(十八)(预处理指令和C函数库完整详解)
- C语言简明教程(十七)(位操作之二进制、字节、按位操作和位字段)
- 微信小程序开发工具——像web页面那样简单开发
- vue项目中引入element-ui框架的流程和注意事项