zoukankan      html  css  js  c++  java
  • javascript之JSON小案例,实现添加数据与清楚数据

    对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>

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

  • 相关阅读:
    LightOJ 1236 Pairs Forming LCM(算数基本定理)
    LightOJ 1197 Help Hanzo(区间素数筛法)
    hdu4291 A Short problem(矩阵快速幂+循环节)
    弗洛伊德判圈法
    poj 1845 Sumdiv (算数基本定理+逆元)
    2018 ACM-ICPC 亚洲青岛区域网络赛 K XOR Clique(异或)
    牛客网暑期ACM多校训练营(第二场)A-run
    最长上升子序列和最长公共子序列
    Olympic Bus
    现代密码学
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299758.html
Copyright © 2011-2022 走看看