我正在使用jQuery从JSON创建一个表,但由于JSON的结构,我很难获得最后一列渲染,其他列也没有完全显示我想要的方式。
我已尝试在最后一栏使用$ .each和for循环,但我尝试过没有修复它。
JSON看起来像:
{
"countries": ["US", "UK", "France", "Germany"],
"months": ["May-2012", "June-2012", "July-2012"],
"types": [{
"type": "Democrat"
}, {
"type": "Republican"
}, {
"type": "Green"
}, ]
}
我的jQuery是:
var target = $('#targettable');
target.empty();
$(target).append($('<tr />')
.append($('<th />').text('Countries'))
.append($('<th />').text('Months'))
.append($('<th />').text('Types')));
$('<tr>')
.append($('<td>', {
'text': myJSON.countries
}))
.append($('<td>', {
'text': myJSON.months
}))
.append($('<td>', {
'text': myJSON.types.type
}))
.appendTo(target);
我做了一个小提琴http://jsfiddle.net/ZukKR/
最后一列根本没有显示,而另外两列没有显示为想要的,我认为它会为每个项目创建一行。
基本上是一列中的国家/地区列表,下一列中的月份列表以及最后一列中的类型列表。不确定我还能尝试什么?
答案 0 :(得分:1)
试试这个(demo):
myJSON = {
"countries": ["US", "UK", "France", "Germany"],
"months": ["May-2012", "June-2012", "July-2012", "Aug-2012"],
"types": [{
"type": "Democrat"
}, {
"type": "Republican"
}, {
"type": "Green"
}, {
"type": "Purple"
}
]
};
var target = $('#targettable'),
table = '<tr><th>Countries</th><th>Months</th><th>Types</th></tr>';
for (var i = 0; i < myJSON.countries.length; i++) {
table += '<tr>' +
'<td>' + myJSON.countries[i] + '</td>' +
'<td>' + myJSON.months[i] + '</td>' +
'<td>' + myJSON.types[i].type + '</td>' +
'</tr>';
}
target.html(table);
注意:
答案 1 :(得分:1)
它比你原先想象的要复杂一点 -
$(target).append($('<tr />')
.append($('<th />').text('Countries'))
.append($('<th />').text('Months'))
.append($('<th />').text('Types')));
for (var i = 0; i < myJSON.countries.length; i++) {
$(target).append('<tr />');
$('tr:last').append($('<td>', {
'text': myJSON.countries[i]
}));
$('tr:last').append($('<td>', {
'text': myJSON.months[i]
}));
$('tr:last').append($('<td>', {
'text': myJSON.types[i].type
}));
}
以下是一个示例 - http://jsfiddle.net/ZukKR/2/
你可以在这里做很多事情来提高效率 - 保存字符串并一次性写出来,缩短append语句以使其成为一个字符串,依此类推。
答案 2 :(得分:1)
你走了:
myJSON = {
"countries": ["US", "UK", "France", "Germany"],
"months": ["May-2012", "June-2012", "July-2012"],
"types": [{
"type": "Democrat"
}, {
"type": "Republican"
},{
"type": "Green"
},
]
}
var target = $('#targettable');
target.empty();
$(target).append($('<tr />')
.append($('<th />').text('Countries'))
.append($('<th />').text('Months'))
.append($('<th />').text('Types'))
);
types = [];
for(var i = 0 ; i < myJSON.types.length; i ++){
types.push(myJSON.types[i]['type']);
}
$('<tr>')
.append($('<td>', {
'text': myJSON.countries
}))
.append($('<td>', {
'text': myJSON.months
}))
.append($('<td>', {
'text': types
}))
.appendTo(target);
答案 3 :(得分:1)
在此jsfiddle
中- no errors in the console. - the headers of the columns are dynamic - the table extends with the longest column
myJSON = {
"countries": ["US", "UK", "France", "Germany"],
"months": ["May-2012", "June-2012", "July-2012","well","this"],
"types": [
{
"type": "Democrat"
}, {
"type": "Republican"
}, {
"type": "Green"
}
]
}
var target = $('#targettable');
var longest =null;
var thead = $('<tr />');
$.each(myJSON, function(index, value){
if(longest === null) longest = index;
else if(myJSON[longest].length < myJSON[index].length) longest = index;
thead.append($("<th>").text(index));
});
target.find("thead").append(thead);
for (var i = 0; i < myJSON[longest].length; i++) {
$(target).append('<tr />');
$('tr:last').append($('<td>', {
'text': myJSON.countries[i]?myJSON.countries[i]:""
}));
$('tr:last').append($('<td>', {
'text': myJSON.months[i]?myJSON.months[i]:""
}));
$('tr:last').append($('<td>', {
'text': myJSON.types[i] && myJSON.types[i].type?myJSON.types[i].type:""
}));
};