如何让一个json文件显示在表格里【实现代码】
2016-05-09 17:03
483 查看
<body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> <tr></tr> </table> //js部分 <script> //简单的json内容 var json = {"姓名":"张三","年龄":"26","性别":"男"}; //获取tr var 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文件显示在表格里【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章推荐
- 使用 Python 处理 JSON 格式的数据
- XML 与 JSON 优劣对比
- 命令行小技巧:读取文件的不同方式
- VBA将excel数据表生成JSON文件
- IE:临时文件保存法
- 文件的读出 编辑 管理
- 文件遍历排序函数
- 在线用表单建立文件夹
- VB获取文件大小的方法
- 文件、目录,文本文件等多种操作类
- 处理驱动器和文件夹
- 表格标签table深入了解
- 用vbs删除某些类型文件和磁盘空间报告的脚本
- Ruby实现批量对文件增加前缀代码分享
- newtonsoft.json解析天气数据出错解决方法
- C#获取文件夹及文件的大小与占用空间的方法
- delphi制作wav文件的方法
- PowerShell实现查询打开某个文件的默认应用程序
- table 隔列(行)换色效果让表格结构更清淅
- bat 文件 学习使用指南