怎么把json用jquery组合成table
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么把json用jquery组合成table相关的知识，希望对你有一定的参考价值。
最好是写出经过。。。因为是新人。。不是很懂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中取出内容拼成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>
希望对你有帮助！！！
参考技术A方案只有一种，动态生成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> 参考技术B 你好，你给的json字符串，并不是很标准。用jQuery的$.parseJSON(你的字符串)，转换不了啊。 参考技术C 先获取JSON数组的长度，然后用for循环给table添加列或者行，然后把json[i]，赋值给table行。 参考技术D 我是用的easyUi，而且只要穿个值，还特么自带分页
用JQuery实现ajax删除数据
数据显示在这个页面。然后在这个页面点击删除后。怎么有无刷新把更新后的数据显示出来呢?
其实可以用jquery的easyui 或者ligerui 来实现，还不错。这2个插件的实现：
在页面加载完成时，通过ajax去后台获取数据，封装成json，传回页面，然后将数据解析，生成table，写入数据行。当你需要对数据操作时，同样也是异步操作，操作完成之后，再去查询数据，通过js重新生成table，写入数据行。
你可以看下这2个插件的api。追问
删除成功过后。然后在去读取数据库。把新数据生成table显示吗
追答嗯，是这样的。
追问谢谢额。不过你说的那2个插件不懂！一会就去看看
本回答被提问者和网友采纳 参考技术B 就是删除玩后 你可以在后台执行一个重新绑定grid的方法 那他就刷新了嘛追问没有刷新。只是集合刷新了。页面没有刷新，所有数据还是之前的那个
追答我是说你后台重新绑定了 你前台的页面不刷新 但是数据会刷新 同学
参考技术C 你把那条数据的ID传到Jquery里面去用$.ajax()技术在传到后台进行删除语句就可以了追问删除是可以啦。就是删除完成了后。要把更新后的数据又显示出来
以上是关于怎么把json用jquery组合成table的主要内容，如果未能解决你的问题，请参考以下文章