如何将 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 一起使用?