对json应用给出一个小案例，加深一些理解：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. 	function show() {
  8. 		var persons = [ {
  9. 			"name" : "zs",
  10. 			"age" : 23,
  11. 			"gender" : "male"
  12. 		}, {
  13. 			"name" : "ls",
  14. 			"age" : 24,
  15. 			"gender" : "female"
  16. 		}, {
  17. 			"name" : "ww",
  18. 			"age" : 25,
  19. 			"gender" : "male"
  20. 		} ];
  21.  
  22. 		//获取table
  23. 		var table = document.getElementById("person");
  24. 		//2.遍历
  25. 		for ( var i = 0; i < persons.length; i++) {
  26. 			//获取每一个json     person的数据
  27. 			var person = persons[i];
  28. 			//获取每一个属性对应的值
  29. 			var name = person.name;
  30. 			var age = person.age;
  31. 			var gender = person.gender;
  32.  
  33. 			//给table添加一行，原理是往后添加。注意：必须写成table.innerHTML+="";的形式。不然会新添加的行覆盖原来的内容。
  34. 			table.innerHTML += "<tr><td>" + name + "</td><td>" + age
  35. 					+ "</td><td>" + gender + "</td></tr>";
  36. 		}
  37.  
  38. 	}
  39.  
  40. 	function show2() {
  41. 		//获取table
  42. 		var table = document.getElementById("person");
  43. 		table.innerHTML = "<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";//原理是用这行数据覆盖现在的table内容
  44. 	}
  45. </script>
  46.  
  47. </head>
  48. <body>
  49. 	<table border="1" width="300px" id="person">
  50. 		<tr>
  51. 			<th>姓名</th>
  52. 			<th>年龄</th>
  53. 			<th>性别</th>
  54. 		</tr>
  55. 	</table>
  56. 	<input type="button" value="显示数据" onclick="show();" />
  57. 	<input type="button" value="清空数据" onclick="show2();" />
  58.  
  59. </body>
  60. </html>

则点击添加数据，会把姓名、年龄、性别添加进去。点击清空数据，就会回到刚加载的页面。

javascript之JSON小案例，实现添加数据与清楚数据的更多相关文章

  1. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  2. 实践javascript美术馆的小案例，学习到的东西还是蛮多的，包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

    javascript美术馆(改进2) 一.javascript编程过程中的好习惯 1.实现预留退路 js被禁掉,图片也可以显示出来,href属性带有图片路径 <script src=" ...

  3. javascript常用小案例

    常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...

  4. javascript综合小案例，校验用户注册信息提交

    完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...

  5. Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例

    Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例 继上篇json解析,我用了原生的json解析,但是在有些情况下我们不得不承认,一些优秀的json解析框架确实十分的 ...

  6. JSON，全称：JavaScript Object Notation，作为一个常见的轻量级的数据交换格

    JSON,全称:JavaScript Object Notation,作为一个常见的轻量级的数据交换格式,应该在一个程序员的开发生涯中是常接触的.简洁和清晰的层次结构使得 JSON 成为理想的数据交换 ...

  7. 【JavaScript定时器小案例】常见的几种定时器实现的案例

    [JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...

  8. javascript里面的数组，json对象，动态添加，修改，删除示例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Wex5案例使用JSON传输Thinkphp后端对接，以达成数据正常输出

    初步接触Wex5,操作起来还是觉得比较复杂!而且教程不多,让我着实比较烦躁! 因此自己动手丰衣足食!还是比较实在的! 采用版本:WeX5应用快速开发框架V3.5正式版 我们使用Wex5的仿淘宝APP案 ...

随机推荐

  1. Linux的发行版，不同发行版之间的联系和区别

    Linux 主要作为Linux发行版(通常被称为"distro")的一部分而使用.这些发行版由个人,松散组织的团队,以及商业机构和志愿者组织编写.它们通常包括了其他的系统软件和应用 ...

  2. centos gnome面板菜单任务栏消失后的解决

    今天终于下决心把我的电脑装成了centos,上网的时候感觉上边的那一行菜单栏碍事儿,就把他给删了 就是桌面最顶上这一行东西,然后百度无果,谷歌上不去,用bing好不容易才找到里解决方案! 症状:进入l ...

  3. python学习之路基础篇(第五篇)

    前四天课程回顾 1.python简介 2.python基本数据类型 类: int:整型 | str:字符串 | list:列表 |tuple:元组 |dict:字典 | set:集合 对象: li = ...

  4. PHP 完整表单实例

    PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website. 在评论 ...

  5. DB2 911错误的解释

    SQL0911N  因为死锁或超时,所以当前事务已回滚.原因码为 "<原因码>". 说明: 当前工作单元参与了未解决的对象争用,因此必须回滚. 原因码如下所示: 2   ...

  6. Mongo 整体架构介绍(1)-------分片集群

    摘要 在mongo初识文中介绍了mongo与cassandra的主要区别,以及mongo物理部署架构图.本文接着上一篇的mongo 架构图,来继续讲分片集群. 分片介绍 shard key mongo ...

  7. iOS注册远程推送消息证书后提示此证书签发者无效的解决办法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们在编写关于远程推送消息的App时需要注册一个相关的证书,我 ...

  8. 带你深入理解STL之Vector容器

    C++内置了数组的类型,在使用数组的时候,必须指定数组的长度,一旦配置了就不能改变了,通常我们的做法是:尽量配置一个大的空间,以免不够用,这样做的缺点是比较浪费空间,预估空间不当会引起很多不便. ST ...

  9. Android软件设置自动检查更新

    如果让我推荐功能强大的第三方集成开发包,我一定会推荐友盟,有着强大的软件统计,分析功能(原谅我,我不是打广告). 这一篇介绍友盟的自动更新功能,但是首先你得拥有友盟. 友盟的集成步骤 1.1 导入SD ...

  10. App引导界面,可以这么玩

    什么是ViewPager,刚一听到这个词,我们可能感觉很奇怪,但是我相信我们大部分人都曾见到过这些界面的.其实它就是我们在安装好一个app之后第一次使用时的那些引导界面的效果.这就是通过ViewPag ...