<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. jquery常用插件及用法总结

    http://www.jb51.net/Special/200.htm

  2. STM32 MX Cube生成的工程中 使用printf向Uart发送数据

    1. 在main函数前面添加: int fputc(int ch,FILE *f){ uint8_t temp[1]={ch}; HAL_UART_Transmit(&huart1,temp, ...

  3. nodejs httpserver

    用nodejs服务器去拿取后台的数据.(我刚开始学的nodejs的时候是一个蒙圈的宝宝 t.t,开始接触的时候,在本地搭建去拿数据.之前菜鸟的我都不知道路由是神马[囧囧]). --> index ...

  4. highcharts 去掉Highcharts.com链接

    将credits属性设为false credits: { enabled: false },

  5. 网络HTTP协议

    WebView:在应用中嵌入一个浏览器 ...... webView = (webView)findViewById(R.id.web_view); webView.getSettings().set ...

  6. itput

    这个网站也非常好,有很多金融it知识免费下载,下载验证码t7QA,名字新共产主义

  7. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

  8. [bzoj2743][HEOI2012]采花(树状数组+离线)

    2743: [HEOI2012]采花 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 1832  Solved: 954[Submit][Status] ...

  9. org.dbunit.database.ambiguoustablenameexception

    对于一个数据库下面多个shema的情况,如果使用DBUNIT配置会出现,上面的错误,不清楚的表名,解决如下 增加红色的shema指定 参考:http://stackoverflow.com/quest ...

  10. java单例类/

    java单例类  一个类只能创建一个实例,那么这个类就是一个单例类 可以重写toString方法 输出想要输出的内容 可以重写equcal来比较想要比较的内容是否相等 对于final修饰的成员变量 一 ...