javascript之JSON小案例，实现添加数据与清楚数据

时间：2021-11-25 16:53:32

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

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

相关文章