如何让一个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文件显示在表格里的更多相关文章
- Extjs加载本地的一个json文件
<head> <title></title> <link href="../Styles/Extjs/resources/css/ext ...
- php 如何获取一个json文件
function showupversion(){ #获取平台类型 $type='android'; #读取文件的路径 $url="D:/WWW/gm_lequ/gm_lequ"; ...
- JS格式化JSON串显示在表格中
JS代码如下,这里用了jq的语法: <script type="text/javascript"> $(function(){ var text = $("# ...
- 从一个word文件中读取所有的表格和标题（1）
首先讲需求: 从word文件中读表格里的数据,然后插入数据库中.word文件中的表格是带有标题的,把标题读出来,进行匹配数据库. 需求分析: word2007底层是以xml文件存储的,所以分析xml的 ...
- 纯前端JSON文件编辑器[0]
准备工作 参考资料: FileReader(用来获取上传文件的数据) <download>(用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用 ...
- 使用Scrapy命令行工具【导出JSON文件】时编码设置
Windows 10家庭中文版,Python 3.6.4,virtualenv 16.0.0,Scrapy 1.5.0, 使用scrapy命令行工具建立了爬虫项目(startproject),并使用s ...
- ASP.NET Core 在 JSON 文件中配置依赖注入
前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等 ...
- php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架
话不多说了.直接开始吧 (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 { "index": { ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
随机推荐
- java开发中中文乱码总结
1.jsp页面内容显示乱码 这种乱码原因很简单,一般的工具或解码程序对中文字符解析时采用默认的解码方式: <%@ page contentType="text/html; charse ...
- CSU 1597 薛XX后代的IQ
Description 薛XX的低IQ是个令人头疼的问题,他的队友深受其害.幸运的是,薛XX非常有钱,所以他买了一些可以提高他的后代的IQ的药.这种药有三个属性,A,B和P.当薛XX使用这种药的时候, ...
- 有向图的强连通分量的求解算法Tarjan
Tarjan算法 Tarjan算法是基于dfs算法,每一个强连通分量为搜索树中的一颗子树.搜索时,把当前搜索树中的未处理的结点加入一个栈中,回溯时可以判断栈顶到栈中的结点是不是在同一个强连通分量中.当 ...
- spring mvc文件上传
package com.haier.controller.newuser; import com.haier.commons.entity.Response; import com.haier.com ...
- NPOI导入xls，xlsx格式实例
NPOI DLL下载地:http://npoi.codeplex.com/releases using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; us ...
- Cookie对象工具包，对象添加，获取，修改-亲测可用
先来了解下Cookie 和 Session对象的概念吧. 首先,Cookie是客户端缓存技术,大小一般为4kb左右,主要存储一些比较小的信息,常用的例子有用户名和密码,且是不安全的: Session是 ...
- Download Oracle Forms 6i
To download Oracle Forms Developer 6i from Oracle click this link http://download.oracle.com/otn/nt/ ...
- item布局里有button之类的子控件时，会截获焦点
需要以上问题时,网上查了很多,结果都是使用android:descendantFocusability属性,设为blocksDescendants就ok了,(具体不详叙述) 可是我给item的根布局设 ...
- 移动端web开发基础概念
最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...
- SQL知识整理一：触发器、存储过程、表变量、临时表
触发器 触发器的基础知识 create trigger tr_name on table/view {for | after | instead of } [update][,][insert][,] ...