首页h5 table显示json数据

h5 table显示json数据

时间: 2023-10-10 20:06:04 浏览: 145

要在h5表格中显示JSON数据，您需要将JSON数据转换为HTML表格。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSON to HTML Table</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <h1>JSON to HTML Table</h1> <table id="myTable"></table> <script> // Example JSON data var jsonData = [ { name: "John", age: 30, city: "New York" }, { name: "Mary", age: 25, city: "Los Angeles" }, { name: "Bob", age: 40, city: "Chicago" } ]; // Convert JSON data to HTML table var table = document.getElementById("myTable"); var headerRow = table.insertRow(); for (var key in jsonData[0]) { var headerCell = document.createElement("th"); headerCell.innerHTML = key; headerRow.appendChild(headerCell); } for (var i = 0; i < jsonData.length; i++) { var row = table.insertRow(); for (var key in jsonData[i]) { var cell = row.insertCell(); cell.innerHTML = jsonData[i][key]; } } </script> </body> </html> ``` 该代码将JSON数据转换为HTML表格，并在页面上显示该表格。您可以将示例JSON数据替换为您自己的JSON数据，以便将其显示在HTML表格中。

阅读全文