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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

	function show() {

		var persons = [ {

			"name" : "zs",

			"age" : 23,

			"gender" : "male"

		}, {

			"name" : "ls",

			"age" : 24,

			"gender" : "female"

		}, {

			"name" : "ww",

			"age" : 25,

			"gender" : "male"

		} ];

		//获取table

		var table = document.getElementById("person");

		//2.遍历

		for ( var i = 0; i < persons.length; i++) {

			//获取每一个json     person的数据

			var person = persons[i];

			//获取每一个属性对应的值

			var name = person.name;

			var age = person.age;

			var gender = person.gender;

			//给table添加一行，原理是往后添加。注意：必须写成table.innerHTML+="";的形式。不然会新添加的行覆盖原来的内容。

			table.innerHTML += "<tr><td>" + name + "</td><td>" + age

					+ "</td><td>" + gender + "</td></tr>";

		}

	}

	function show2() {

		//获取table

		var table = document.getElementById("person");

		table.innerHTML = "<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";//原理是用这行数据覆盖现在的table内容

	}

</script>

</head>

<body>

	<table border="1" width="300px" id="person">

		<tr>

			<th>姓名</th>

			<th>年龄</th>

			<th>性别</th>

		</tr>

	</table>

	<input type="button" value="显示数据" onclick="show();" />

	<input type="button" value="清空数据" onclick="show2();" />

</body>

</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. Spring cloud 学习资料整理

    推荐博客 纯洁的微笑 程序猿DD liaokailin的专栏 周立 Spring Cloud 方志朋 Spring Cloud 专栏 许进 跟我学Spring Cloud 推荐网站 Spring Cl ...

  2. c++DLL编程详解

    DLL(Dynamic Link Library)的概念,你可以简单的把DLL看成一种仓库,它提供给你一些可以直接拿来用的变量.函数或类.在仓库的发展史上经历了“无库-静态链接库-动态链接库”的时代. ...

  3. 关于使用Git的几点小技巧

    告诉git忽略对已经纳入版本管理的文件a的修改,git会一直忽略此文件直到重新告诉git可以再次跟踪此文件: git update-index --assume-unchanged a 告诉git恢复 ...

  4. Pickle模块数据对象持久化操作

    Pickle模块的作用是持久化(序列化)的储存数据.因此我先解释下:什么是序列化与反序列化.什么是对象序列化和对象反序列化.通俗地讲,它们的定义如下:序列化: 把一个对象保存到一个文件或数据库字段中去 ...

  5. 用tensorflow迁移学习猫狗分类

    笔者这几天在跟着莫烦学习TensorFlow,正好到迁移学习(至于什么是迁移学习,看这篇),莫烦老师做的是预测猫和老虎尺寸大小的学习.作为一个有为的学生,笔者当然不能再预测猫啊狗啊的大小啦,正好之前正 ...

  6. OpenResty和Resis一些基本的性能配置

    Basics: 1. Ensure that you have not disabled Lua code cache: https://github.com/openresty/lua-nginx- ...

  7. C实战：强大的程序调试工具GDB

    C实战:强大的程序调试工具GDB 1.基本调试 这里只列举最最常用的GDB命令. 1.1 启动GDB gdb program:准备调试程序.也可以直接进入gdb,再通过file命令加载. 1.2 添加 ...

  8. Android makefile编写基础

    首先来看一个简单的Android makefile,这个是我上篇文章写的,重新摘出来: LOCAL_PATH:=$(call my-dir) include $(CLEAR_VARS) LOCAL_M ...

  9. PHP 文件下载 浅析

    无控制类型 avi文件 rar文件 mp4MP3图片等会被直接解析 核心代码 类型 长度 实现函数 优化 原始下载文件的名称 优化后的文件下载名称 总结 文件下载的功能对一个网站而言基本上是必备的了, ...

  10. 用Python最原始的函数模拟eval函数的浮点数运算功能(2)

    这应该是我编程以来完成的难度最大的一个函数了.因为可能存在的情况非常多,需要设计合理的参数来控制解析流程.经验概要: 1.大胆假设一些子功能能够实现,看能否建立整个框架.如果在假设的基础上都无法建立, ...