怎么把json用jquery组合成table
最好是写出经过。。。因为是新人。。不是很懂js和jq。。先谢过了。。下面是json的源码vartable_1={"table":{"_width":"600","thea...
最好是写出经过。。。因为是新人。。不是很懂js和jq。。先谢过了。。
下面是json的源码
var table_1 = {
"table": {
"_width": "600",
"thead": {
"tr": [
{
"th": [
{
"_text": "1"
},
{
"_text": "2"
},
{
"_colspan": "2",
"_text": "34"
},
{
"_text": "5"
},
{
"_text": "6"
}
]
},
{
"th": [
{
"_text": "1"
},
{
"_text": "2"
},
{
"_text": "3"
},
{
"_text": "4"
},
{
"_text": "5"
},
{
"_text": "6"
}
]
}
]
},
"tbody": {
"tr": [
{
"td": [
{
"_text": "td1"
},
{
"_text": "td2"
},
{
"_text": "td3"
},
{
"_text": "td4"
},
{
"_text": "td5"
},
{
"_text": "td6"
}
]
},
{
"td": [
{
"_text": "td21"
},
{
"_text": "td22"
},
{
"_text": "td23"
},
{
"_text": "td24"
},
{
"_text": "td25"
},
{
"_text": "td26"
}
]
}
]
}
}
} 展开
下面是json的源码
var table_1 = {
"table": {
"_width": "600",
"thead": {
"tr": [
{
"th": [
{
"_text": "1"
},
{
"_text": "2"
},
{
"_colspan": "2",
"_text": "34"
},
{
"_text": "5"
},
{
"_text": "6"
}
]
},
{
"th": [
{
"_text": "1"
},
{
"_text": "2"
},
{
"_text": "3"
},
{
"_text": "4"
},
{
"_text": "5"
},
{
"_text": "6"
}
]
}
]
},
"tbody": {
"tr": [
{
"td": [
{
"_text": "td1"
},
{
"_text": "td2"
},
{
"_text": "td3"
},
{
"_text": "td4"
},
{
"_text": "td5"
},
{
"_text": "td6"
}
]
},
{
"td": [
{
"_text": "td21"
},
{
"_text": "td22"
},
{
"_text": "td23"
},
{
"_text": "td24"
},
{
"_text": "td25"
},
{
"_text": "td26"
}
]
}
]
}
}
} 展开
5个回答
展开全部
你好！！
//一个笨方法，从json中取出内容拼成table并追加到body中
$(function(){
var table_1 = {
"table": {
"_width": "600",
"thead": {
.......
};
var jsonTbl = table_1.table; //获取json中的table
if(jsonTbl != ""){ //如果table不为空
var $tbl = $("<table/>"); //创建一个table元素
$tbl.width(jsonTbl._width).attr("border",1);//设置table1的宽度和边框
//循环thead中的tr
$.each(jsonTbl.thead.tr, function(i, _tr){
var $tr = $("<tr/>"); //创建一个tr元素
//循环tr中的th
$.each(_tr.th, function(j, _th){
var $th = $("<th/>"); //创建一个th元素
$th.text( _th._text ); //设置th元素的文本内容
if(_th._colspan){ //如果存在_colspan属性
$th.attr("colspan", _th._colspan); //为th元素添加colspan属性
}
$tr.append( $th ); //将th元素追加至tr元素上
});
$tbl.append( $tr ); //将该tr元素追加至table元素上
});
//循环tbody中的tr
$.each(jsonTbl.tbody.tr, function(i, _tr){
var $tr = $("<tr/>"); //创建一个tr元素
//循环tr中的td
$.each(_tr.td, function(j, _td){
var $td = $("<td/>"); //创建一个td元素
$td.text( _td._text ); //设置td元素的文本内容
$tr.append( $td ); //将该td元素追加至tr元素上、
});
$tbl.append( $tr ); //将tr元素追加至table元素上
})
//将表格元素追加至body
$("body").append( $tbl );
}
};
//还有种使用模板实现的方式，需要引入一个jquery.tmpl.min.js文件，它是个jQuery模板插件
<script id="tbl" type="text/x-jquery-tmpl">
{{if ($data != "")}}
<table width=${_width} border=1 >
{{each $data.thead.tr}}
<tr>{{each th}}<th colspan=${_colspan}>${_text}</th>{{/each}}</tr>
{{/each}}
{{each $data.tbody.tr}}
<tr>{{each td}}<td>${_text}</td>{{/each}}</tr>
{{/each}}
</table>
{{/if}}
</script>
<script>
$(function(){
var table_1 = {
"table": {
"_width": "600",
"thead": {
.......
};
$("#tbl").tmpl( table_1.table ).appendTo( $("body") );
});
</script>
希望对你有帮助！！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
方案只有一种，动态生成html。
步骤：
1、获取json串
2、通过json串，动态拼接html语句
3、通过jquery获取table,然后往table中输出html
示例
<body>
<table id='tb'> //定义一个table
</table>
</body>
<script>
var json=[{a:'1',b:'2'},{a:'3',b:'4'}];//定义一个json串，也可以通过其他途径获取到json对象。
var ht = '';
for(var i=0;i<json.length;i++){//循环json对象，拼接tr,td的html
ht = ht+'<tr>';
ht = ht + '<td>' + json[i].a + '</td>';
ht = ht + '<td>' + json[i].b + '</td>';
ht = ht+'</tr>';
}
$('#tb').html(ht);//通过jquery方式获取table，并把tr,td的html输出到table中
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你好，你给的json字符串，并不是很标准。用jQuery的$.parseJSON(你的字符串)，转换不了啊。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先获取JSON数组的长度，然后用for循环给table添加列或者行，然后把json[i]，赋值给table行。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我是用的easyUi，而且只要穿个值，还特么自带分页
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
