<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. C#：获取环境信息

    外部环境数据1.需要管理员权限2.需要安装office2003以上完整版3.需要安装flash reader 10.0以上4.需要安装adodb reader;Adobe Acrobat X Pro; ...

  2. android ViewPager使用遇到的问题

    项目需求是需要实现一个有两页可滑动的界面,就想到了使用ViewPager,在实现是没有深入考虑,就直接使用了PagerAdapter,页面是正常实现了,可是发现无法流畅的刷新页面(直接使用notify ...

  3. python 随机生成固定长度的字串

    from random import Random#随机生成4到20位的用户名def random_username(): username = '' chars = 'AaBbCcDdEeFfGgH ...

  4. windows平台整合Apache与tomcat

    Apache与Tomcat整合的好处 Apache主要用来解析静态文本,如html.Tomcat虽然也有此功能,但Apache效率大大高于Tomcat,尤其是对于并发数较大的企业级应用,能更好的显示A ...

  5. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  6. React Native for Android 学习笔记

    C:\Users\Vic Lee\AwesomeProject>react-native run-android Starting JS server... Running D:\Android ...

  7. flume的使用

    1.flume的安装和配置 1.1 配置java_home,修改/opt/cdh/flume-1.5.0-cdh5.3.6/conf/flume-env.sh文件

  8. 【转载】Windows 7 不同安装模式简要区别（图解）

    ---------------------------------------------------------------------------------------------------- ...

  9. 1.Dotnet Core安装

    DtnetCore1.0.1的安装包我以上传至百度网盘,里面有安装教程. http://pan.baidu.com/s/1c2iLNNE 如果安装不上,请留言,我会在第一时间回复你. 不需要挂VPN.

  10. xmemcached的使用

    转载 http://www.voidcn.com/blog/u010408365/article/p-4972896.html xmemcached主要特性 高性能 XMemcached同样是基于ja ...