如何让一个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同时按下两个方向键
Dec 01 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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 无限极分类
2008/03/27 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
javascript一点特殊用法
2008/05/28 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
Vue的生命周期操作示例
2019/09/17 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
理解Python中的With语句
2015/02/02 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Django框架视图介绍与使用详解
2019/07/18 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python分类测试代码实例汇总
2020/07/23 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
行政办公室岗位职责
2014/03/18 职场文书
无毒社区工作方案
2014/05/23 职场文书
美术社团活动总结
2014/06/27 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle