我已经完成的工作是： 我写了一个PHP脚本，它反映了我的JSON数据结构。 我现在正在尝试编写一个Html脚本，它将以JSON格式获得结果，但在下面的html表格中回显出这是我的PHP脚本和我的尝试HTM脚本。 关于我如何做到这一点的任何提示，我将不胜感激。将JSON转换为html表格

Details B

$(document).ready(function() {

JSONload();

})

function JSONload() {

$('#results').empty();

$('

').appendTo('#results');

$.get("details.php", {date1:$('#date_1').val(),date2:$('#date_2').val()}, function(result){

for(elem in result[0])

$('

'+elem+'').appendTo('#table2');

for(var i = 0; i <= result.length; i++) {

$('

').appendTo('#table2');

for(elem in result[i]) {

$('

'+result[i][elem]+'').appendTo('#'+i);

}

}

},'json');

}

Key	Value
Date as dd/mm/yyyy (date_1)
Date as dd/mm/yyyy (date_2)
List name of all cyclists with their country's name, gdp and population

+0

遍历JSON数据，生成一个HTML字符串，那么完成时，将它附加到你的新表中。你有什么尝试？ –

2013-04-08 14:25:59

+0

$(文件)。就绪(函数(){ \t \t \t JSONload(); \t \t}) \t \t功能JSONload(){ \t \t \t $( '＃结果')空(); \t \t \t $('')。appendTo('＃results'); ()“，”date1“)。val()，date2：$('＃date_2')。val()}，function(results){ \t \t \t \t为(在结果ELEM [0]) \t \t \t \t \t $( '' + ELEM +” ').appendTo(' ＃table2' 的); \t \t \t \t for(var i = 0; i <= result。长度; i ++){ \t \t \t \t \t \t $('

').appendTo('#table2'); \t \t \t \t \t为(在结果ELEM [I]){ \t \t \t \t \t \t $( '​​'+导致[I] [ELEM] +' ').appendTo(' ＃' + I) ; \t \t \t \t \t} \t \t \t \t} \t \t \t}); \t \t} –

2013-04-08 14:28:38

+2

@ user2201189请编辑该问题以包含该代码。评论的确不是为了处理除一行(或更少)片段之外的任何内容。 –

2013-04-08 14:30:46

A

回答

0

假设你的JSON数据回来在这样这样的格式：

[

{

"name": "Lance Armstrong",

"country": "USA",

"gdp": 5000000000000,

"population": 350000000

},

{

"name": "Someone Else",

"country": "France",

"gdp": 1000000000000,

"population": 70000000

}

]

像你想的方法，下面将生成一个表：

function JSONload() {

$.get("details.php", {

date1: $('#date_1').val(),

date2: $('#date_2').val()

}, function (results) {

var $table = $('

');

var $headerRow = $("

");

var keys = [];

var aRow = results[0];

for (var key in aRow) {

keys.push(key);

$headerRow.append("

" + key + "");

}

$table.append($headerRow);

for (var i = 0; i < results.length; i++) {

var row = results[i];

console.log(row);

var $rowEl = $("

");

for (var j = 0; j < keys.length; j++) {

console.log(key);

key = keys[j];

var value = row[key];

$rowEl.append("

" + value + "");

}

$table.append($rowEl);

}

$('#results2').empty().append($table);

需要注意的是拼凑的html使用jQuery的字符串不是最佳实践。如果您正在寻找一个完整的网格，请检查@ ADC答案中提出的解决方案之一。

如果您打算进行大量的JavaScript HTML生成，我建议您查看一个模板库，如Handlebars或Underscore。这允许你写干净，语义模板像下面(从把手取)：

模板

{{title}}

{{#each people}}

{{this}}

{{/each}}

使用

var template = Handlebars.compile($("#template").html());

var html = template({

"title": "My People",

"people": [

"John Jones",

"Mary Smith",

"Suzie Smart"

]

});

$("results").html(html);

2013-04-08 16:07:44

brettjonesdev

2

我建议你去看看一些流行的jQuery插件：

DataTables。我在几个项目中使用它。通常我会创建一个由客户端调用的处理程序来提供JSON格式的数据。该插件负责渲染，分页，启用排序和过滤。

jqGrid。我没有经验，但它被一个巨大的社区使用。

2013-04-08 15:24:58