利用js实现简易的学生管理系统

最新推荐文章于 2023-01-27 16:40:49 发布

G.W.S.

最新推荐文章于 2023-01-27 16:40:49 发布

阅读量1.2k

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46120696/article/details/104655096

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用js实现简易的学生管理系统

The source code

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		function init(){
			localStorage.removeItem("name");
			localStorage.removeItem("id")
			localStorage.removeItem("sex")
			localStorage.removeItem("count")
		} //初始化页面，每次删除localStorage中的数据
		function add() {
			var stor = window.localStorage
			var name = document.getElementById("name")
			var id = document.getElementById("id")
			var sex = document.getElementById("sex")
			stor.setItem("name", name.value)
			stor.setItem("id", id.value)
			stor.setItem("sex", sex.value)
			var nam = stor.getItem("name")
			var id1 = stor.getItem("id")
			var sex1 = stor.getItem("sex")
			display(nam, id1, sex1)
		}//向localStorage添加数据
		function display(name, id, sex) {
			var stuinfo = document.getElementById("stuinfo")
			var tr = document.createElement("tr")
			var td1 = document.createElement("td")
			var td2 = document.createElement("td")
			var td3 = document.createElement("td")
			var td4 = document.createElement("td")
			var input = document.createElement("input")
			var count = stuinfo.rows.length;
			input.type = "button"
			input.value = "删除信息"
			td1.innerHTML = name
			td2.innerHTML = id
			td3.innerHTML = sex
			input.addEventListener("click", function() {
				stuinfo.deleteRow(count)
			})
			tr.appendChild(td1)
			tr.appendChild(td2)
			tr.appendChild(td3)
			tr.appendChild(td4)
			td4.appendChild(input)
			stuinfo.appendChild(tr)
		}//在表格中展示数据
	</script>
</head>
<body onload="init()">
	name&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp id&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
	&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp sex
	<br>
	<form action="" method="">
		<input type="text" name="" id="name" value="" />
		<input type="text" name="" id="id" value="" />
		<input type="text" name="" id="sex" value="" />
		&nbsp &nbsp &nbsp &nbsp
		<input type="button" name="" id="" value="add" onclick="add()" />
	</form>
	<br>
	<br>
	<table border="1px" cellspacing="0px" cellpadding="" id="stuinfo">
		<tr>
			<td>name</td>
			<td>id</td>
			<td>sex</td>
		</tr>
	</table>
</body>