如您所知， 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": " 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": " 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的数组中。结构非常简单，您可以向其中添加更多数据。
![[TimLinux] JavaScript AJAX接收到的数据转换为JSON格式](https://1200zi.500zi.com/uploadfile/img/15/967/37bc8c3d399e49e8b782d2d4d2633ca7.jpg)
