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

<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文件显示在表格里【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    <body> //首先得把架子搭起来 <table id = "tb" border="1"> <tr></tr> <tr></tr> </table> //js部分 <script> //简单的json内容 var json = {"姓名":"张三","年龄":"26","性别&q

  • 详解ASP.NET Core 在 JSON 文件中配置依赖注入

    详解ASP.NET Core 在 JSON 文件中配置依赖注入

    前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等)时候,都是提供了专有的接口以供使用第三方的依赖注入组件,比如我们常用的会使用 Autofac.Untiy.String.Net 等,这些第三放依赖注入组件基本上都提供了一套配置注入或者配置生命周期的方式,除了直接配置到类里面之外,还提供了要么使用 xml 文件,要么使用 json 等,那么在新的

  • package.json文件配置详解

    package.json 是npm init命令初始化后,在项目的根目录下自动生成的配置文件,它定义了这个项目的配置信息以及所需要的各种模块,npm install根据这个命令,自动下载所需的模块.package.json就是一个json文件,json本身只是一种数据格式,它本身并不支持注释,此处的注释只是为了更加方便的理解package.json的各个字段 { //项目名称 "name": "demo", //version是版本(遵守"大版本.次要版本

  • Win10系统下安装labelme及json文件批量转化方法

    一.安装环境:windows10,anaconda3,python3.6 由于框架maskrcnn需要json数据集,在没安装labelme环境和跑深度学习之前,我安装的是anaconda3,其中pyhton是3.7版本的,经网上查阅资料,经过一番查找资料,发现,原来在2019年,TensorFlow还不支持python3.7,所以,迫于无奈,我只能乖乖把python的版本退回到3.6版本,具体步骤也很简单.就是打开anaconda prompt ,然后输入conda install pytho

  • JSON文件及Python对JSON文件的读写操作

    一,什么是JSON文件 JSON和XML都是互联网上数据交换的主要载体. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.XML本身不算复杂,但是,加上DTD.XSD.XPath.XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范.于是,道格拉斯·克罗克福特(Douglas Crockford)发明了JSON这种超轻量级的数据交换语言,由于JSON非

  • 读取本地json文件,解析json(实例讲解)

    模拟用户登录 # data.json 文件同目录下 [ { "id": 1, "username": "zhangshan", "password": "123qwe", "lock": false }, { "id": 2, "username": "lisi", "password": "123

  • 一文详解如何根据后端返回的url下载json文件

    一文详解如何根据后端返回的url下载json文件

    目录 需求场景描述 实现思路分析 完整的 demo 示例 总结 需求场景描述 有时候会遇到异步接口会返回一个 url 地址,然后前端需要根据这个 url 地址去下载文件资源的需求场景. 而这个 url 其实是一个静态资源地址,并非一个经过后端接口内部处理的接口地址. 所以当尝试像下面这样使用 a 标签去执行该 url 地址,会发现它是直接预览打开的一个 json 文件(也可能是一个txt,js等文件) <a href=" http://192.168.0.172:8888/file/pac

  • 一文搞懂Python读取text,CSV,JSON文件的方法

    目录 前言 打开文件 Python 中的文件读取模式 读取文本文件 读取 CSV 文件 读取 JSON 文件 总结 前言 文件是无处不在的,无论我们使用哪种编程语言,处理文件对于每个程序员都是必不可少的 文件处理是一种用于创建文件.写入数据和从中读取数据的过程,Python 拥有丰富的用于处理不同文件类型的包,从而使得我们可以更加轻松方便的完成文件处理的工作 本文大纲: 使用上下文管理器打开文件 Python 中的文件读取模式 读取 text 文件 读取 CSV 文件 读取 JSON 文件 打开

  • java比较两个json文件的差异及说明

    java比较两个json文件的差异及说明

    目录 比较两个json文件的差异 推荐java目前比较常用的4个json库 一.什么是JSON? 二.常用的四种JSON库 比较两个json文件的差异 其实是以第一个json文件为准,查看第二个对比第一个的差异. //排序 public static JSONArray sortJsonArray(JSONArray array) { List<Object> list = array.toJavaList(Object.class); list.sort(Comparator.compari

  • Nodejs处理Json文件并将处理后的数据写入新文件中

    目录 处理Json文件并将处理后的数据写入新文件 问题描述 实现过程 用Nodejs解析json数据 处理Json文件并将处理后的数据写入新文件 问题描述 事情是这样的,朋友让我处理一个json文件并将处理后的数据写入新文件.这个json文件的结构如下: [     {         "head_img": "http://wx.qlogo.cn/mmhead/xxxxxxxxxxx",         "nick_name": "x

随机推荐