在jQuery中将JSON数组转换为HTML表
在jQuery中将JSON数组转换为HTML表
提问于 2009-06-26 20:15:59
有没有一种非常简单的方法可以将JSON对象数组转换为HTML表，但不包括几个字段？或者我将不得不手动完成此操作？
回答 13
Stack Overflow用户
回答已采纳
发布于 2009-06-26 20:22:11
我不确定这是不是你想要的，但是有jqGrid。它可以接收JSON并生成网格。
Stack Overflow用户
发布于 2012-04-24 23:52:17
使用jQuery会让这一切变得更简单。
下面的代码将获取一个数组数组，并将其存储转换为行和单元格。
$.getJSON(url , function(data) {
var tbl_body = "";
var odd_even = false;
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
});
tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
odd_even = !odd_even;
});
$("#target_table_id tbody").html(tbl_body);
});您可以通过添加以下内容来添加对要排除的键的检查
var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };在getJSON回调函数的开头添加：
if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}围绕着tbl_row +=系列。
编辑:之前赋值为空的变量
编辑:基于Timmmm的injection-free贡献的版本。
$.getJSON(url , function(data) {
var tbl_body = document.createElement("tbody");
var odd_even = false;
$.each(data, function() {
var tbl_row = tbl_body.insertRow();
tbl_row.className = odd_even ? "odd" : "even";
$.each(this, function(k , v) {
var cell = tbl_row.insertCell();
cell.appendChild(document.createTextNode(v.toString()));
});
odd_even = !odd_even;
});
$("#target_table_id").append(tbl_body); //DOM table doesn't have .appendChild
});Stack Overflow用户
发布于 2015-01-07 14:59:28
通过扩展$从JSON对象数组创建HTML表，如下所示
$.makeTable = function (mydata) {
var table = $('<table border=1>');
var tblHeader = "<tr>";
for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
tblHeader += "</tr>";
$(tblHeader).appendTo(table);
$.each(mydata, function (index, value) {
var TableRow = "<tr>";
$.each(value, function (key, val) {
TableRow += "<td>" + val + "</td>";
});
TableRow += "</tr>";
$(table).append(TableRow);
});
return ($(table));
};并按如下方式使用：
var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");其中TableCont是某个div
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1051061
复制相关文章
相似问题