JavaScript json轉

PHPz原創: 2023-05-22 09:20:37361瀏覽

化成HTML表格詳細教學

在前端開發中，使用JavaScript和JSON都是非常常見的技術。而將JSON資料轉換成HTML表格來展示資料則是非常實用的功能。本文將介紹如何使用JavaScript將JSON資料轉換成HTML表格。

建立JSON資料

首先，我們需要建立一個包含資料的JSON物件。以下是一個簡單的範例：

var data = [
  {"name": "John", "age": 26, "gender": "Male"},
  {"name": "Lucy", "age": 23, "gender": "Female"},
  {"name": "Tom", "age": 30, "gender": "Male"}
];

建立HTML表格的基本結構

在HTML檔案中，我們需要建立一個表格的基本結構，包括表頭和表格主體。以下是一個基本的表格結構範例：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

在這個範例中，我們建立了一個包含表頭和表格主體的基本表格結構。表頭包含三列：Name、Age和Gender。表格主體的內容我們將在接下來的步驟中使用JavaScript動態新增。

使用JavaScript動態產生表格主體

接下來，我們需要使用JavaScript動態產生表格主體。以下是程式碼範例：

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");

  var nameCell = document.createElement("td");
  var nameText = document.createTextNode(data[i].name);
  nameCell.appendChild(nameText);
  row.appendChild(nameCell);

  var ageCell = document.createElement("td");
  var ageText = document.createTextNode(data[i].age);
  ageCell.appendChild(ageText);
  row.appendChild(ageCell);

  var genderCell = document.createElement("td");
  var genderText = document.createTextNode(data[i].gender);
  genderCell.appendChild(genderText);
  row.appendChild(genderCell);

  tbody.appendChild(row);
}

在這個範例中，我們先透過id取得到表格元素，然後取得到表格主體元素。接著，我們使用for迴圈來遍歷JSON資料中的每一個對象，並為每一行新增三個表格儲存格：姓名、年齡和性別。最後，我們將每一行加入到表格主體中。

完整的HTML檔案程式碼

<!DOCTYPE html>
<html>
<head>
  <title>JSON to HTML Table</title>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    var data = [
      {"name": "John", "age": 26, "gender": "Male"},
      {"name": "Lucy", "age": 23, "gender": "Female"},
      {"name": "Tom", "age": 30, "gender": "Male"}
    ];

    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  </script>
</body>
</html>

擴充功能：使用jQuery AJAX取得JSON資料

如果JSON資料來自後台服務，我們可以使用jQuery AJAX來取得JSON資料。以下是一個範例程式碼：

$.ajax({
  url: 'your_data_url',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  }
});

在這個範例中，我們使用jQuery的ajax方法來取得資料。我們將從你提供的數據url獲取數據，數據類型是JSON格式。一旦我們成功取得數據，我們使用先前的程式碼將其轉換成HTML表格。

結論

在本文中，我們學習如何使用JavaScript和JSON將資料展示成HTML表格。對於需要展示資料的前端開發者來說，這是一項非常重要的技能。希望透過本文的介紹，你已經了解如何實現這個功能，並且能夠在自己的專案中應用。

以上是JavaScript json轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript 多選框選幾個下一篇：javascript 多選框選幾個

看更多