<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文件显示在表格里的更多相关文章

  1. Extjs加载本地的一个json文件

    <head>    <title></title>    <link href="../Styles/Extjs/resources/css/ext ...

  2. php 如何获取一个json文件

    function showupversion(){ #获取平台类型 $type='android'; #读取文件的路径 $url="D:/WWW/gm_lequ/gm_lequ"; ...

  3. JS格式化JSON串显示在表格中

    JS代码如下,这里用了jq的语法: <script type="text/javascript"> $(function(){ var text = $("# ...

  4. 从一个word文件中读取所有的表格和标题（1）

    首先讲需求: 从word文件中读表格里的数据,然后插入数据库中.word文件中的表格是带有标题的,把标题读出来,进行匹配数据库. 需求分析: word2007底层是以xml文件存储的,所以分析xml的 ...

  5. 纯前端JSON文件编辑器[0]

    准备工作 参考资料: FileReader(用来获取上传文件的数据) <download>(用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用 ...

  6. 使用Scrapy命令行工具【导出JSON文件】时编码设置

    Windows 10家庭中文版,Python 3.6.4,virtualenv 16.0.0,Scrapy 1.5.0, 使用scrapy命令行工具建立了爬虫项目(startproject),并使用s ...

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

    前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等 ...

  8. php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

    话不多说了.直接开始吧  (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 {        "index": {                ...

  9. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

随机推荐

  1. （更新）Java + 腾讯企业邮箱 + javamail + SSL 发送邮件

    咳咳~最头疼的就是莫名其妙的错误. 本来今年6月份运行通过的代码,过俩月就报错了. javax.mail.MessagingException: Could not connect to SMTP h ...

  2. 使用jQuery解析JSON数据

    我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: {"comments&quo ...

  3. Web App适配不同屏幕的几点建议

    安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视 ...

  4. MySQL常用语句

    第1章 SQL结构化语言 1.什么是SQL? SQL,英文全称Structured Query Language,中文意思是结构化查询语言,它是一种关系型数据库中的数据进行定义和操作的语言方法,是大多 ...

  5. javascript作用域链与原型链有联系吗?

    一般来说,作用域链是针对变量的,js里面大的范围上来说,只有两种作用域,全局作用域和函数内部作用域,如果函数1里面又定义了函数2(一般都是匿名函数), 那么就有了这么一个作用域链全局作用域==> ...

  6. Django 1.10 找不到静态资源解决方法

    测试版本:Django 1.10 问题:Django项目找不到静态资源 解决方法: 1.首先你需要在自己的app下面创建2个目录 static 和  templates 树形结构如下(DjangoPr ...

  7. hihoCoder 1430 : A Boring Problem（一琐繁题）

    hihoCoder #1430 : A Boring Problem(一琐繁题) 时间限制:1000ms 单点时限:1000ms 内存限制:256MB Description - 题目描述 As a ...

  8. ShaderForge

    什么是ShaderForge ShaderForge的目标是推动统一的视觉质量提升到了新的高度, 给你自由的材质创建在一个视觉和直观的方式——不需要代码! ShaderForge的特性 •实时着色器预 ...

  9. 安装centos时候自动安装vm tool，导致无法继续安装centos的解决办法

    我原先安装centos 的时候装的是CD版的,也是到这一步就卡住了,然后我在"虚拟机->取消安装vmare tool" 点击“取消安装vmare tool”,然后他就可以进行 ...

  10. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...