<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. Raytracer

    http://www.cnblogs.com/miloyip/archive/2010/03/29/1698953.html http://www.scratchapixel.com/lessons/ ...

  2. CryptoJS DES加密

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  3. 2017年1月1日 星期日 --出埃及记 Exodus 21:27

    2017年1月1日 星期日 --出埃及记 Exodus 21:27 And if he knocks out the tooth of a manservant or maidservant, he ...

  4. Excel 2007 批量删除隐藏的文本框

    该方法取自百度知道,该朋友给出函数,我详细写一下方法. 打开有文本框的excel文件. 按 Alt+F11 打开编辑器. 将下面的函数复制进去: Sub deltxbox()Dim s As Shap ...

  5. MATLAB地图工具箱学习总结（三）地图工具箱的基本知识

    MATLAB地图工具箱学习总结(三)地图工具箱的基本知识 今天想要介绍的是一些比较基础的函数.了解了这些函数,地图投影的基本概念才能真正明白.而要想继续研究MATLAB中有关地图投影的函数,尤其是未来 ...

  6. 设计一个泛型类Collection

    要求:设计一个泛型类Collection,它存储object对象的集合(在数组中),以及该集合当前的大小.提供public方法isEmtpy,makeEmpty,insert,remove,isPre ...

  7. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  8. apache服务器安装以及使用passenger插件部署rails应用

    小例子可以部署在rails自带的WEBrick上,逐渐往后走还得上Apache. 安装apache服务器 命令是sudo apt-get install apache2 安装passenger插件 安 ...

  9. DOM对象与jquery对象有什么不同

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  10. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...