如何将 JSON 对象转换为 HTML 表格? [关闭]

Posted

技术标签:

【中文标题】如何将 JSON 对象转换为 HTML 表格? [关闭]【英文标题】:How do I convert a JSON Object into a HTML table? [closed] 【发布时间】:2013-12-26 09:28:31 【问题描述】:

我有一个如下所示的 JSON 对象:

"a": 1, "b": 3, "ds": 4

我想将它转换成如下所示的 html 表格:

name | Value
a     1
b     3
ds    4

谁能告诉我如何做到这一点?

【问题讨论】:

【参考方案1】:

您应该看一下Knockout.js,通过它,您可以获取您的 JSON 数据并将其绑定到 HTML 元素。

然后自动完成更新,因此您不必自己搞砸。

这是list of examples。

【讨论】:

【参考方案2】:

使用 jQuery 非常简单:

$(function() 
  var jsonObj = $.parseJSON('"a":1,"b":3,"ds":4');
  var html = '<table border="1">';
  $.each(jsonObj, function(key, value) 
    html += '<tr>';
    html += '<td>' + key + '</td>';
    html += '<td>' + value + '</td>';
    html += '</tr>';
  );
  html += '</table>';
  $('div').html(html);
);

这是working fiddle的链接。

更新:实现此目的的另一种方法是使用 a library called dynatable 将 JSON 转换为可排序的表。

【讨论】:

你的代码比我的代码简单得多,也更干净。谢谢...拯救了我的灵魂!【参考方案3】:

你可以使用javascript

<script type="text-javascript">
  var data = 
    "a": 1,
    "b": 3,
    "ds": 4
  ;
  // Create a new table
  var table = document.createElement("table");
  // Add the table header
  var tr = document.createElement('tr');
  var leftRow = document.createElement('td');
  leftRow.innerHTML = "Name";
  tr.appendChild(leftRow);
  var rightRow = document.createElement('td');
  rightRow.innerHTML = "Value";
  tr.appendChild(rightRow);
  table.appendChild(tr);
  // Add the table rows
  for (var name in data) 
    var value = data[name];
    var tr = document.createElement('tr');
    var leftRow = document.createElement('td');
    leftRow.innerHTML = name;
    tr.appendChild(leftRow);
    var rightRow = document.createElement('td');
    rightRow.innerHTML = value;
    tr.appendChild(rightRow);
    table.appendChild(tr);
  
  // Add the created table to the HTML page
  document.body.appendChild(table);
</script>

生成的 HTML 结构是:

<table>
  <tr>
    <td>Name</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>a</td>
    <td>1</td>
  </tr>
  <tr>
    <td>b</td>
    <td>3</td>
  </tr>
  <tr>
    <td>ds</td>
    <td>4</td>
  </tr>
</table>

这是working fiddle的链接。

【讨论】:

以上是关于如何将 JSON 对象转换为 HTML 表格? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery 中将 HTML 表格数据转换为 JSON 对象

如何将 HTML 表转换为 JSON 并将 JSON 与 JSON.NET 一起使用?

使用jQuery遍历HTML表格,将表格中的数据转换成JSON

将 HTML 表单转换为 JSON 对象

如何将 HTML 代码转换为 JSON 对象?

将 HTML 表格的表单输入字段转换为 JSON