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>

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

  • 相关阅读:
    作业信息获取
    SQL Server数据库性能监控计数器
    c# 索引器學習
    C# DataGridView 小技巧
    C# DataTable 小技巧
    c# 小技巧
    C# new,Virtual,abstract,sealed,Override的簡單理解
    C# 位操作符
    C# 類型小技巧
    C# partial 局部类型
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299758.html
Copyright © 2011-2022 走看看