一个简单的前端信息列表管理(html，js)

最新推荐文章于 2024-01-16 19:52:35 发布

OMiGr

最新推荐文章于 2024-01-16 19:52:35 发布

阅读量909

点赞数

分类专栏：前端实例文章标签： html5 css javascript

本文链接：https://blog.csdn.net/OMiGr/article/details/113105224

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个简单的前端信息列表管理系统，虽然未涉及信息录入验证，但详细阐述了页面元素布局、CSS样式设计以及JavaScript实现的功能。

摘要由CSDN通过智能技术生成

一个简单的前端信息列表管理

未做信息录入验证

页面元素

<input id="sname" type="text" placeholder="name"/>
<input id="sid" type="text" placeholder="id"/>
<input id="sage" type="text" placeholder="age"/>
<input id="sadd" type="button" value="add"/>
<hr />
<table>
	<thead>
		<tr>
			<td>name<input id="sortbyname" type="button" value="sort"></td>
			<td>id<input id="sortbyid" type="button" value="sort"></td>
			<td>age<input id="sortbyage" type="button" value="sort"></td>
			<td><input id="deleteAll" type="button" value="deleteAll"></td>
		</tr>
	</thead>
	<tbody id="studenttable">
	</tbody>
</table>

css样式

table{
   
	border: solid 1px #292A38;
}
table td{
   
	text-align: center;
	width: 100px;
	border: solid 1px #292A38;
}

js代码

window.onload = function(){
   
	var students = new Array();
	var studenttable = document.getElementById("studenttable");
	var default_sort = 1;
	
	var sortbyname = document.getElementById("sortbyname");
	var sortbyid = document.getElementById("sortbyid");
	var sortbyage = document.getElementById("sortbyage");
	
	document.getElemen