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


Posted in Javascript onMay 09, 2016
<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文件显示在表格里【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
详解JavaScript执行模型
Nov 16 Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
js原型链与继承解析(初体验)
May 09 #Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 #Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 #Javascript
JavaScript中的prototype原型学习指南
May 09 #Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 #Javascript
You might like
PHP新手上路(十三)
2006/10/09 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
js单例模式的两种方案
2013/10/22 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
如何使用Python调整图像大小
2020/09/26 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
六查六看剖析材料
2014/02/15 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
大学生活自我评价
2014/04/09 职场文书
拆迁委托协议书
2014/09/15 职场文书
八月一日观后感
2015/06/10 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL