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

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

  • 相关阅读:
    IFS二次开发03——Item
    TFS二次开发01——TeamProjectsPicher
    我的八年程序之路(二)三月方便面换来800月薪
    我的八年程序之路(一)求职的艰辛
    重温CSS之背景、文本样式
    重温CSS之文档结构
    重温CSS之基础
    不使用第三方软件、使用IE11自带功能来屏蔽浏览器广告
    Windwos8.1下配置PHP环境
    Python学习系列之(二)图解Windows8.1下安装Django
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299758.html
Copyright © 2020-2023  润新知