给定一个包含JSON数据的HTML文档, 任务是将JSON数据转换为HTML表。
方法1：
- 将JSON对象放入变量中。
- 调用一个函数, 该函数首先将列名称添加到<table>元素中(它正在查找所有列, 即列名称的UNION)。
- 遍历JSON数据并将键与列名匹配。将该键的值放在相应的列中。
- 如果该键没有值, 则将该列留空。
范例1：本示例实现了上述方法。
<!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>元素中。
- 然后, 对于对象中的每个条目, 创建一个单元格并将其插入到特定行。
- 如果该键没有值, 则将该列留空。
范例2：本示例实现了上述方法。
<!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 >输出如下：
在单击按钮之前：
单击按钮后：
