如何将数据从JSON加载到Bootstrap表中？(1)

📌 相关文章

📜 如何将数据从JSON加载到Bootstrap表中？(1)

📅 最后修改于: 2023-12-03 15:09:07.576000 🧑 作者: Mango

如何将数据从JSON加载到Bootstrap表中？

Bootstrap是一种流行的前端框架，可以用于快速开发响应式网站。其中之一的组件是表格，可以通过加载JSON数据来填充内容。在本篇文章中，我们将介绍如何将数据从JSON加载到Bootstrap表中。

步骤

1. 创建HTML文件

首先，我们需要创建一个HTML文件。在 <head> 标签中，我们需要引入Bootstrap表的依赖项。在 <body> 标签中，我们需要创建一个表格元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSON数据加载到Bootstrap表格中</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">名称</th>
          <th scope="col">价格</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

2. 创建JSON数据文件

在项目目录下创建一个名为 data.json 的文件，并将以下内容复制并粘贴到该文件中。

[
  {
    "id": 1,
    "name": "商品1",
    "price": 10.00
  },
  {
    "id": 2,
    "name": "商品2",
    "price": 20.00
  },
  {
    "id": 3,
    "name": "商品3",
    "price": 30.00
  }
]

3. 编写JavaScript代码

我们将使用JavaScript来从JSON文件中获取数据，并将其填充到Bootstrap表中。在 <body> 标签的结尾处添加以下代码。

<script>
  $.getJSON("data.json", function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push("<tr><td>" + val.id + "</td><td>" + val.name + "</td><td>" + val.price + "</td></tr>");
    });

    $("<tbody/>", {
      "html": items.join("")
    }).appendTo("table");
  });
</script>

这段代码使用了 $.getJSON() 方法从我们的JSON文件中获取数据。接着，我们使用 $.each() 方法遍历数据，并将每一行数据添加到一个数组中。最后，我们使用jQuery创建一个包含数据的HTML元素，并将其附加到表格中。

4. 运行代码

现在，我们可以在浏览器中打开HTML文件，看到我们加载JSON数据到Bootstrap表中的结果了。

总结

通过以下这些简单的步骤，我们可以轻松地将数据从JSON文件加载到Bootstrap表中：

创建HTML文件。
创建JSON数据文件。
编写JavaScript代码来获取数据并填充到表格中。
在浏览器中运行代码，查看结果。

希望这篇文章对你有帮助！