对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. Python自动化测试入门

    在当前自动化测试中,最火的语言就是Python,很容易上手.然后就是Java+testng+appium做的UI自动化测试.下面我们就用Python脚本,做自动化集成测试. (1)获取APK文件中ID ...

  2. block的那些事(从懵懂到使用)

    从大学开始自学iOS,在iOS岗位已经两年了,遇到传值等操作,代理和block二选一的话,以前我会毫不犹豫选择代理.久而久之,入职到大公司之后,发现处处是block的天地,才慢慢的了解block并爱上 ...

  3. javascript:void(0) 含义

    javascript:void(0) 含义 我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思 ...

  4. Python3 File 方法

    Python3 File(文件) 方法 file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 序号 方法及描述 1 file.close() 关闭文件.关闭后文件不能再进行 ...

  5. 安全框架Shiro

    原文地址:https://www.cnblogs.com/learnhow/p/5694876.html 一.架构 要学习如何使用Shiro必须先从它的架构谈起,作为一款安全框架Shiro的设计相当精 ...

  6. 【java集合系列】--- LinkedList

    开篇前言--LinkedList中的基本用法 在前面的博文中,小编介绍List接口中的ArrayList集合,List这个接口,有两个实现类,一个就是ArrayList另一个是LinkedList(链 ...

  7. 5秒让你的View变3D,ThreeDLayout使用和实现

    在很久很久以前,写了一篇自定义3d view的博客.但是只是讲了如何实现,实现起来还是比较耗时,所以本着平易近人的心态,把他封装成了一个ViewGroup,只需要在你的view或者布局外面包裹一层Th ...

  8. Linux基础指令

    Linux基础指令 只写了最简单的一些文件操作,基本没有带参数 查看当前目录 pwd 跳转到某路径 cd 查看当前目录下的文件 ls ls -l // -l 查看详细信息 打开当前所在文件夹 open ...

  9. App安全(一) Android防止升级过程被劫持和换包

    文/ Tamic 地址/ http://blog.csdn.net/sk719887916/article/details/52233112 前言 APP 安全一直是开发者头痛的事情,越来越多的安全漏 ...

  10. 网络爬虫框架Scrapy简介

    作者: 黄进(QQ:7149101) 一. 网络爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本:它是一个自动提取网页的程序,它为搜索引擎从万维 ...