动态前端渲染本地JSON数据为表格：精通HTML、CSS、JavaScript

前端

2024-01-19 02:30:48

使用 HTML、CSS 和 JavaScript 从本地 JSON 文件呈现数据

在现代 Web 开发中，从服务器获取动态数据并将其呈现到用户界面中至关重要。在本教程中，我们将探索如何使用 HTML、CSS 和 JavaScript 从本地 JSON 文件获取数据并将其呈现为一个漂亮的表格。

创建项目结构

首先，让我们创建一个项目结构，包括以下文件：

index.html: HTML入口文件
style.css: CSS样式表
script.js: JavaScript脚本

编写 HTML 代码

在 index.html 中，包含以下 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>动态获取本地 JSON 数据，渲染为表格</h1>

  <div id="table-container"></div>

  <script src="script.js"></script>
</body>
</html>

这创建了一个标题和一个带有 id 的 div 元素，该元素将充当表格容器。

编写 CSS 代码

在 style.css 中，包含以下样式：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 5px;
}

#table-container {
  width: 100%;
  overflow-x: auto;
}

这些样式定义了一个完整的表格，带有带边框的表头 (th) 和数据单元格 (td)。

编写 JavaScript 代码

在 script.js 中，包含以下 JavaScript 脚本：

// 获取 JSON 数据
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 创建表格元素
    const table = document.createElement('table');

    // 创建表头行
    const tableHeadRow = document.createElement('tr');

    // 遍历 JSON 数据的键并将其作为表头
    for (const key in data[0]) {
      const tableHeadCell = document.createElement('th');
      tableHeadCell.textContent = key;
      tableHeadRow.appendChild(tableHeadCell);
    }

    // 将表头行添加到表中
    table.appendChild(tableHeadRow);

    // 遍历 JSON 数据并创建表格行
    for (const row of data) {
      const tableBodyRow = document.createElement('tr');

      // 遍历 JSON 数据的键并创建数据单元格
      for (const key in row) {
        const tableBodyCell = document.createElement('td');
        tableBodyCell.textContent = row[key];
        tableBodyRow.appendChild(tableBodyCell);
      }

      // 将数据行添加到表中
      table.appendChild(tableBodyRow);
    }

    // 将表格添加到容器中
    const tableContainer = document.getElementById('table-container');
    tableContainer.appendChild(table);
  });