使用jQuery从JSON创建3个表列
Creating 3 table columns from JSON using jQuery
我使用jQuery从JSON制作一个表,但由于JSON的结构,我正在努力使最后一列呈现,其他列也不完全显示我正在寻找的方式。
我试过使用$。每个和最后一列的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);
i make a fiddle of it http://jsfiddle.net/ZukKR/
最后一列根本不显示,其他2列不显示,我想它会为每个项目创建一行。
所以基本上一列是国家列表,下一列是月份列表,最后一列是类型列表。不知道我还能尝试什么吗?
给你:
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);
Try this (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);
注意:
- 如果条目数量不匹配,将会出现js错误,我必须添加额外的月份并键入条目。
- 对每个JSON条目使用append会使构建表的速度慢得多,因为有很多DOM交互,所以最好构建一个字符串,然后只应用表一次。
这可能比你最初想象的要简单一些-
$(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语句使其成为一个字符串,等等。
<>之前-控制台没有错误。-列的标题是动态的-以最长的列扩展表之前
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:""
}));
};
相关文章:
- onkeyup无法动态创建多个文本区域
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 在三个.js中创建球体(例如地球)的磁力线
- 如何创建包含多个视频的视频横幅
- 在页面上创建多个元素,而不是一个发生更改的元素
- sailsjs在创建两个模型时的错误处理
- 使用数据数组创建多个类似组件
- 创建具有2个唯一数字的Javascript数组
- 从字符串创建dom元素时添加多个类
- 标签的rggraph问题Above未出现在第二个图形创建中
- 如何在 Angular JS 中从关联数组创建多个复选框
- 如何在同一浏览器屏幕中创建多个窗口
- 如何创建可从多个应用程序使用的PHP登录web服务
- 如何创建一个确定2个数字之间值的函数
- “动态创建的表”上的复选框(每行最多只能选择1个)
- D3.js如何只创建一个绑定到多个数据项的数据集的元素
- Angular.js:使用ng repeat创建2个html容器
- 使用jQuery创建具有不同类名或ID的多个元素
- 如何从带有多个对象的JSON字符串创建JSON对象
- 在新表单上使用JavaScript创建多个共享点项目,但将下一页加载延迟到全部创建