如何使用 JavaScript/jQuery 将 JSON 数据转换为 HTML 表？

在 Web 开发中，我们经常需要从后端接收 JSON 格式的数据，并将其展示出来。而常见的展示方式之一就是将数据转换为 HTML 表格。本文将介绍如何使用 JavaScript 和 jQuery 将 JSON 数据转换为 HTML 表格。

准备工作

在开始之前，我们需要准备一些基础知识和工具：

• 了解 HTML 和 CSS 基础知识；
• 了解 JavaScript 和 jQuery 基础知识；
• 在 HTML 中添加一个空的 table 元素，如 <table></table>。

将 JSON 数据转为 HTML 表格

获取 JSON 数据

首先，我们需要从后端获取 JSON 数据。这里我们使用 jQuery 中的 $.getJSON 方法。

$.getJSON('data.json', function(data) {
  // 在回调函数中处理数据
});

上面的代码中，data.json 是存储我们需要的 JSON 数据的文件路径。$.getJSON 方法会自动解析 JSON 格式的数据并传入回调函数中。

处理 JSON 数据

在回调函数中，我们需要对 JSON 数据进行处理，将其转换为 HTML 表格。这里我们可以使用 jQuery 中的 $.each 方法对 JSON 数组进行遍历。具体操作如下：

$.getJSON('data.json', function(data) {
  var $table = $('<table></table>'); // 新建一个 table 元素
  var $thead = $('<thead></thead>'); // 新建一个 thead 元素
  var $tbody = $('<tbody></tbody>'); // 新建一个 tbody 元素

  // 处理表头数据
  var $trHead = $('<tr></tr>'); // 新建一个表头行元素
  $.each(data[0], function(key) {
    var $th = $('<th></th>').text(key); // 新建一个 th 元素，并赋值为 key 值
    $trHead.append($th); // 将 th 元素添加到表头行元素中
  });
  $thead.append($trHead); // 将表头行元素添加到 thead 元素中

  // 处理表格内容数据
  $.each(data, function(index, value) {
    var $trBody = $('<tr></tr>'); // 新建一个数据行元素
    $.each(value, function(key, value) {
      var $td = $('<td></td>').text(value); // 新建一个 td 元素，并赋值为 value 值
      $trBody.append($td); // 将 td 元素添加到数据行元素中
    });
    $tbody.append($trBody); // 将数据行元素添加到 tbody 元素中
  });

  $table.append($thead); // 将 thead 元素添加到 table 元素中
  $table.append($tbody); // 将 tbody 元素添加到 table 元素中
  $('body').append($table); // 将 table 元素添加到 body 元素中
});

上面的代码中，我们首先新建了一个空的 table 元素，并分别新建了 thead 和 tbody 元素用于存放表头和表格内容数据。接着，我们使用 $.each 方法对表头和表格内容数据进行了处理，并将处理结果添加到对应的元素中。最后，我们将 table 元素添加到 body 元素中，完成了 JSON 数据到 HTML 表格的转换。

最终效果

最终效果如下图所示：

总结

本文介绍了如何使用 JavaScript 和 jQuery 将 JSON 数据转换为 HTML 表格。需要注意的一点是，该方法适用于 JSON 数组中的所有元素具有相同的数据结构的情况。如果 JSON 数组中的元素数据结构不同，就需要进行相应的修改。