AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

如何让一个json文件显示在表格里【实现代码】

51自学网 http://www.wanshiok.com
json文件,表格
<body>//首先得把架子搭起来<table id = "tb" border="1"> <tr></tr> <tr></tr></table>//js部分<script>//简单的json内容var json = {"姓名":"张三","年龄":"26","性别":"男"};//获取trvar tr = document.getElementsByTagName('tr');//tr1和tr2下面会用到,但是要先声明,给一个空值var tr1 = '';var tr2 = '';//用for in来进行遍历,k是键,json[k]是值for(var k in json){ tr1+='<th>'+k+'</th>'; tr2+='<td>'+json[k]+'</td>';}//tr1里放的是键,也就是姓名,年龄,性别,然后把这些信息放到第一个tr里tr[0].innerHTML = tr1;//tr2里放的是值,也就是张三,26,男,把这些信息放到第二个tr里tr[1].innerHTML = tr2;</script>

以前想着如何才能把json的内容动态放到表格里面呢?有时候面试会被问到,当然面试时问的是用ajax如何办到。但是我这里就写个简单的demo,现有的json放到表格里。这个demo我做了好几遍,虽然每次放到表格里,但是样子都很古怪,有可能是一个竖排例如这样

姓名

张三

年龄

26

性别

又有可能是这样

姓名

年龄

性别

张三

26

但是我想要的是这样

姓名   年龄   性别

张三    26     男

在经过几次实验之后,发现需要在html骨架结构上做调整,一开始只放table标签是不行的,得加两个tr标签,最后用js把两个tr标签填充,才能达到想要的效果

以上这篇如何让一个json文件显示在表格里【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


json文件,表格  
上一篇:Bootstrap富文本组件wysiwyg数据保存到mysql的方法  下一篇:JavaScript 函数的执行过程