<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. if语句的一个小技巧

    也就是说选中类型的时候边框属性的选择项是不能选择的一般用if else 在类型的CHANGE方法中,现在一句话就能搞定看代码 private void m_rdbtnProID2_CheckedCha ...

  2. JavaScript基本数据类型（较易混淆的几个概念）

    1. var a; typeof a;  控制台输出结果是什么? 解答:a只被声明,而未被初始化,在javascript中,未初始化的变量默认值都为undefined; 2. var s=" ...

  3. xampp修改mysql默认密码详解

    在这里介绍xampp修改mysql默认密码的大概过程是先利用xampp的phpmyadmin进入修改mysql密码,修改之后我们再修改xampp中phpmyadmin的密码,这样就完整的修改mysql ...

  4. linux块设备驱动之实例

    1.注册:向内核注册个块设备驱动,其实就是用主设备号告诉内核这个代表块设备驱动 sbull_major  =  register_blkdev(sbull_major, "sbull&quo ...

  5. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  6. Apache设置页面认证（原创贴-转载请注明出处）

    ================写在前面的话============== 1.本试验使用的apache版本是2.4.24 场景描述:网站后台管理页面比较重要,不应该任何人都让访问,所以对后台页面做认证 ...

  7. mysql查看修改字符集

    1.列出MYSQL支持的所有字符集: SHOW CHARACTER SET; 2.当前MYSQL服务器字符集设置 SHOW VARIABLES LIKE 'character_set_%'; 3.当前 ...

  8. cmd部分提权常用命令

    ipconfig 显示本地IP地址 net start telnet 开telnet服务 net use z:127.0.0.1c$ 映射对方的C盘 net user 查看所有用户列表 net use ...

  9. 5.Swift枚举|结构体|类|属性|方法|下标脚本|继承

    1. 枚举: ->在Swift中依然适用整数来标示枚举值,需搭配case关键字 enum  Celebrity{  case DongXie,XiDu,Nandi,BeiGai }  // 从左 ...

  10. Cheatsheet: 2016 03.01 ~ 03.31

    JAVA Quick Java 8 or Java 7 Dev Environments With Docker Printing arrays by hacking the JVM Mobile H ...