如何让一个json文件显示在表格里
<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文件显示在表格里的更多相关文章
- Extjs加载本地的一个json文件
<head> <title></title> <link href="../Styles/Extjs/resources/css/ext ...
- php 如何获取一个json文件
function showupversion(){ #获取平台类型 $type='android'; #读取文件的路径 $url="D:/WWW/gm_lequ/gm_lequ"; ...
- JS格式化JSON串显示在表格中
JS代码如下,这里用了jq的语法: <script type="text/javascript"> $(function(){ var text = $("# ...
- 从一个word文件中读取所有的表格和标题（1）
首先讲需求: 从word文件中读表格里的数据,然后插入数据库中.word文件中的表格是带有标题的,把标题读出来,进行匹配数据库. 需求分析: word2007底层是以xml文件存储的,所以分析xml的 ...
- 纯前端JSON文件编辑器[0]
准备工作 参考资料: FileReader(用来获取上传文件的数据) <download>(用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用 ...
- 使用Scrapy命令行工具【导出JSON文件】时编码设置
Windows 10家庭中文版,Python 3.6.4,virtualenv 16.0.0,Scrapy 1.5.0, 使用scrapy命令行工具建立了爬虫项目(startproject),并使用s ...
- ASP.NET Core 在 JSON 文件中配置依赖注入
前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等 ...
- php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架
话不多说了.直接开始吧 (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 { "index": { ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
随机推荐
- Volley全方位解析,带你从源码的角度彻底理解
Volley 是 Google 推出的轻量级 Android 异步网络请求框架和图片加载框架.在 Google I/O 2013 大会上发布.其适用场景是数据量小,通信频繁的网络操作. 主要特点: ( ...
- c++中函数中变量内存分配以及返回指针、引用类型的思考
众所周知,我们在编程的时候经常会在函数中声明局部变量(包括普通类型的变量.指针.引用等等). 同时,为了满足程序功能的需要,函数的返回值也经常是指针类型或是引用类型,而这返回的指针或是引用也经常指向函 ...
- Web App适配不同屏幕的几点建议
安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视 ...
- 分析恶意windows程序
1.windows 注册表 注册表根键 注册表被划分为下面5个根键 HKEY_LOCAL_MACHINE(HKLM) 保存对本地机器全局设置 HKEY_CURRENT_USER(HKCU) 保存当前用 ...
- MySQL常用语句
第1章 SQL结构化语言 1.什么是SQL? SQL,英文全称Structured Query Language,中文意思是结构化查询语言,它是一种关系型数据库中的数据进行定义和操作的语言方法,是大多 ...
- bash中使用mysql中的update命令
mysql -uroot -ppasswd -e "update tbadmin set sPassword ='************' where sUserName='admin'& ...
- 什么是hasLayout？
想更好的理解CSS,尤其是IE下对CSS的渲染,hasLayout是一个非常有必要彻底弄清楚的概念,大多数IE下的显示错误,就是源于hasLayout.hasLayout是一种只读属性,有两种状态tr ...
- JavaScript对象的chapterII
一.BOM对象 1.window对象——表示整个浏览器窗口 常用方法: a)alert()——系统消息框 alert('Hello World'); b)确认对话框——confirm() confir ...
- UE4 AI入门
转自:http://blog.csdn.net/u011707076/article/details/46607121 本文是翻译的官方文https://docs.unrealengine.com/l ...
- 纯硬盘安装Kali 无需U盘
工具: EasyBCD 安装后启动,然后依次点击 添加新条目 >> NeoGrub >> 安装 然后如下图 点击配置,然后弹出一个记事本窗口,先最小化.进行如下操作: 1.拷贝 ...