使用 JavaScript 将 JSON 数据动态转换为 HTML 表

如您所知， JSON 或 JavaScript Object Notation是一种简单易懂的数据格式。JSON 是轻量级且独立于语言的，这就是它通常与jQuery Ajax 一起用于传输数据的原因。在本文中，我将向您展示如何使用 JavaScript将 JSON 数据动态转换为 HTML 表格。此外，您将了解如何使用createElement() 方法在 JavaScript 中动态创建表。

注意：您还可以使用 jQuery 将数据从 JSON 文件转换为 HTML 表，并且使用此过程，您可以使用 jQuery 或 JavaScript创建简单的 CRUD 应用程序。

此示例的 JSON 如下所示。

[{"Book ID": "1","Book Name": "Computer Architecture","Category": "Computers","Price": "125.60"},{"Book ID": "2","Book Name": "Asp.Net 4 Blue Book","Category": "Programming","Price": "56.00"},{"Book ID": "3","Book Name": "Popular Science","Category": "Science","Price": "210.40"}
]

上面的 JSON 有一个包含三个不同书籍的数组，它们的 ID、名称、所属的类别和价格。我的演示只有三个记录。您可以添加更多。我希望读取 JavaScript 中的 JSON 数据，获取 <table> 标题的列（书籍 ID、书籍名称等）以及相应标题的值。检查下面的图像。

标记

在标记部分，我有一个输入类型按钮来调用 JavaScript 函数，该函数将提取 JSON 数据，动态创建带有标题和行的 <table>，最后在其中填充数据。我还有 DIV 元素，它将作为我们表格的容器。填充数据后，我会将<table>附加到 <div>。

<!DOCTYPE html>
<html>
<head><title>Convert JSON Data to HTML Table</title><style>th, td, p, input {font:14px Verdana;}table, th, td {border: solid 1px #DDD;border-collapse: collapse;padding: 2px 3px;text-align: center;}th {font-weight:bold;}</style>
</head>
<body><input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" /><p id="showData"></p>
</body><script>function CreateTableFromJSON() {var myBooks = [{"Book ID": "1","Book Name": "Computer Architecture","Category": "Computers","Price": "125.60"},{"Book ID": "2","Book Name": "Asp.Net 4 Blue Book","Category": "Programming","Price": "56.00"},{"Book ID": "3","Book Name": "Popular Science","Category": "Science","Price": "210.40"}]// EXTRACT VALUE FOR HTML HEADER. // ('Book ID', 'Book Name', 'Category' and 'Price')var col = [];for (var i = 0; i < myBooks.length; i++) {for (var key in myBooks[i]) {if (col.indexOf(key) === -1) {col.push(key);}}}// CREATE DYNAMIC TABLE.var table = document.createElement("table");// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.var tr = table.insertRow(-1);                   // TABLE ROW.for (var i = 0; i < col.length; i++) {var th = document.createElement("th");      // TABLE HEADER.th.innerHTML = col[i];tr.appendChild(th);}// ADD JSON DATA TO THE TABLE AS ROWS.for (var i = 0; i < myBooks.length; i++) {tr = table.insertRow(-1);for (var j = 0; j < col.length; j++) {var tabCell = tr.insertCell(-1);tabCell.innerHTML = myBooks[i][col[j]];}}// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.var divContainer = document.getElementById("showData");divContainer.innerHTML = "";divContainer.appendChild(table);}
</script>
</html>

我提到的 JSON 数据存储在一个名为myBooks的数组中。结构非常简单，您可以向其中添加更多数据。

使用 JavaScript 将 JSON 数据动态转换为 HTML 表相关推荐

vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
将json数据写入html表单,将json数据提交到html表中
我需要基于json响应构建一个表,调用API时调用API, 调用API并让JSON工作正常,但我没有发现任何有关构建表的文档并从x.js传递给x.html.我成功地从json传递了1个参数/值.将js ...
【真实用】将json数据转化为mysql表
记录一下今天将json数据转化为mysql表的历程数据源长这样其中jsonstr字段是json类型,需要获取其中ID为3的jsonstr的data对象,并转化成表的形式如果用Java代码应该是好 ...
javascript通过json数据按格式生成一个按字母分类排序的分类信息表
效果图如下 1.json数据格式 var _people=[{name:'朱瑞',url:'aaaaaa',nick:'zhu'},{name:'刘桂清',url:'aaaaa',nick:'liu' ...
Javascript 处理 JSON 数据示例
最近做了一个 MEAN stack 的 app .后台用 NodeJS 从 Jira rest api 获得JSON数据并做处理,然后前端用 AngularJS Ajax call 获得处理后的 JS ...
JavaScript 解析 JSON 数据
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...
Java 接收返回json数据动态取data里的值
json数据 data: {} {"code":200,"data":{"accountNonExpired":true,"acc ...
javascript将JSON数据导出为Excle表格
文章目录方式一:导出json数据 const jsonData = [{name:'路人甲',phone:'123456789',email:'000@123456.com'},{name:'炮灰乙 ...
纯JavaScript 实现JSON数据导出到Excel(支持多个Sheet页)
核心思想: 拿到JSON 格式的数据后,使用JS逻辑生成符合 EXCEL格式规范的XML字符串然后转字符串内容把换成一个Blob 实例对象最后通过临时创建的一个A标签通过触发它的点击事件模拟浏览 ...
java json csv_彻底理解使用JavaScript 将Json数据导出CSV文件
前言将数据报表导出,是web数据报告展示常用的附带功能.通常这种功能都是用后端开发人员编写的.今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件. 原理首先在本地用Excel ...

使用 JavaScript 将 JSON 数据动态转换为 HTML 表

使用 JavaScript 将 JSON 数据动态转换为 HTML 表相关推荐

最新文章

热门文章