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>

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

  • 相关阅读:
    锚接口(上)——hashchange api 和 $.uriAnchor
    仿B站项目(4)webpack打包第三方库jQuery
    仿B站项目(3)页面配置
    微信小程序:scroll滑到指定位置
    开发微信小程序——古龙小说阅读器
    仿B站项目——(2)环境配置,文件目录
    仿B站项目——(1)计划,前端工程
    腾讯Alloy团队代码规范
    webpack热加载:修改文件自动刷新浏览器并更新
    日时相克,困龙被伤。日落死地
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299758.html
Copyright © 2011-2022 走看看