学生信息管理页面HTML+CSS+JavaScript基础开发

最新推荐文章于 2024-03-04 19:30:58 发布

小弦的博客

最新推荐文章于 2024-03-04 19:30:58 发布

阅读量5.6k

点赞数 10

本文链接：https://blog.csdn.net/qq_42258904/article/details/104719957

版权

HTML 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

Javascript

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

简单的学生信息表页面

需求分析：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学生信息管理操作（HTML+css+JavaScript复习作业）</title>
		<link href="css/index_css.css" rel="stylesheet" type="text/css"/>
			
	</head>
	<body>
		<div >
			<form>
				<span>姓名：</span>
				<input type="text" id="stuName" class="stuName" />
				<span class="message" id="stuNameMessage"></span>
				<br />
				<span>学号：</span>
				<input type="text" id="stuCode" class="stuCode" />
				<span class="message" id="stuCodeMessage"></span>
				<br />
				<span>年龄：</span>
				<input type="text" id="stuAge" class="stuAge" />
				<span class="message" id="stuAgeMessage"></span>
				<br />
				
				<div class="toobar">
					<input type="button" name="" id="stuAddBtn" value="新增" />
					<input type="button" name="" id="stuSaveBtn" value="保存" disabled="disabled"/>
					
				</div>
				
			</form>
		</div>
		<div>
			<hr />
			<span >搜索：</span>
				<input type="text" id="seacher" class="seacher" />
				<input type="button" name="" id="stuSeachBtn" value="查找" disabled="disabled"/>
		</div>
		<hr/>
		<table>
			<thead>
				<tr>
					<th>操作</th>
					<th>序号</th>
					<th>姓名</th>
					<th>学号</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody id="stuTbody">
				<!--
                	<tr>
					<td>
						<input type="button" value="删除" />
						<input type="button" value="编辑" />
					</td>
					<td>1</td>
					<td>张三</td>
					<td>20184555</td>
					<td>22</td>*/
				</tr>
                -->
			</tbody>
			
		</table>
		<!--定义一个学生模板-->
		<table class="stuTabTemp">
			<!--描述：这是一个行模板-->
			<tbody >
				
                	<tr id="stuTrTemp">
					<td data-stu-id = "$id$">
						<input type="button" value="删除" onclick="delStu(this)"/>
						<input type="button" value="编辑" onclick="toEditStu(this)" />
					</td>
					<td class="stuSeqTd">$num$</td>
					<td class="stuNameTD">$name$</td>
					<td class="stuCodeTd">$code$</td>
					<td class="stuAgeTd">$age$</td>
				</tr>
               
			</tbody>
		</table>
	</body>
	
	<script type="text/javascript" src="js/index1.js"></script>
</html>

css文件代码：

form>span{
	font-weight: bold;
	font-size:16px;
}
.toobar{
	margin: 10px 0px;
}
/*
 * 按钮样式
 */
input[type="button"]{
	background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius:5px ;
    cursor: pointer;
}
/*
 * 禁止按钮
 */
input:disabled{
	border: 1px solid gray;
	background-color: gray;
	color: white;
	cursor: auto;
}
table{
	width: 1000px;
	border-collapse:collapse ;
	
}
th,th{
	border: 1px gray solid;
	padding: 10px;
}
th{
	width: 20%;
	background-color: lightskyblue;
}
th:first-child{
	width: 30%;
}
td{
	text-align: center;
}
.stuTabTemp{
	display: none;
}

JavaScript文件代码：

/*
 * 通过HTML5本地储存模拟数据操作
 */
/*
 * 工具函数
 */
var $ = function(id){
	return document.getElementById(id);
};
//学生模板的tr信息
var stulineTemp = $("stuTrTemp").innerHTML;
//用于回车事件，判断是编辑还是新增。”0“代表新增，”1“代表编辑，默认是新增	
var currentFlag = 0;
//学生信息
/*
 * var gridData = [{
	name:"Tom",
	code:'0001',
	age:20
},{
	name:"Hellen",
	code:'0002',
	age:20
},{
	name:"John",
	code:'0003',
	age:20
}];
 */

/*
 * 更新序号
 */
var sortGridData = function(){
	//因模板带有stuSeqtd,不能使用document
	var stuseqEles = $("stuTbody").getElementsByClassName("stuSeqTd");
	for(var i = 0;i<stuseqEles.length;i++){
		stuseqEles[i].innerHTML = i + 1;
		
	}
};
/*
 * 模拟数据库生成一个id
 */
var getRowId = function(){
	var id = localStorage.getItem("STU_ID");
	//id存在，id+1，id不存在，id=1
	if(id){
		id = Number(id)+1;
	}else{
		id = 1;
	}
	localStorage.setItem("STU_ID",id);
	return id;
	
};


/*
 * 从本地存储中获取学生学习
 */
var selectStuData = function(){
	var data=[];
	var gridData = localStorage.getItem("STU_DATA");
	if(gridData){
		data = JSON.parse(gridData);
	}
	return data;
};

/*
 * 新增学生信息到本地存储
 */
var addStuData = function(stu){
	var data = selectStuData();
	data.push(stu);
	//localStorage只能存储字符串
	localStorage.setItem("STU_DATA",JSON.stringify(data));
	
};
/*
 * 根据学生id，从本地存储中，删除学生信息
 */
var delStuData = function(id){
	//查询所有学生信息
	var data = selectStuData();
	for(var i = 0;i < data.length;i++){
		
		if(data[i].id == id){
			//JavaScript对象array的常用方法：splice（）根据索引删除元素
			data.splice(i,1);//i代表索引，1代表删除几个
			break;//删除后跳出循环
		}
	}
	//localStorage只能存储字符串
	localStorage.setItem("STU_DATA",JSON.stringify(data));
	
};
/*
 * 更新学生信息，根据id，改变本地存储localStorage中的“STU_DATA”对应值
 */
var editStuData = function(stu){
	var data = selectStuData();
	for(var i = 0;i < data.length;i++){
		if(data[i].id == stu.id){
			data[i].name = stu.name;
			data[i].code = stu.code;
			data[i].age = stu.age;
			
			break;
		}
	}
	//localStorage只能存储字符串
	localStorage.setItem("STU_DATA",JSON.stringify(data));
	
};

/*
 * 初始化数据
 */
 var initGridData = function(){
 	var gridData = selectStuData();
 	if(gridData){
 		//遍历学生信息
	for(var i = 0;i<gridData.length;i++){
		insertStuTr(gridData[i]);
		
	}
	//更新序号
	sortGridData();
 	}
	
	
}
 

/*
 * 将单行数组信息插入到表格当中
 */
var insertStuTr = function(stu){

	//对学生模板信息进行替换操作
	var trContent = stulineTemp.replace("$id$",stu.id).replace("$name$",stu.name).replace("$code$",stu.code).replace("$age$",stu.age);
	//创建行节点
	
	var trEle = document.createElement("tr");
	trEle.innerHTML = trContent;
	var stuTbodyTwo = $("stuTbody").innerHTML;
	//stuTbodyTwo.appendChild(trEle);
	$('stuTbody').appendChild(trEle);
	
};

/*
 * 新增学生信息
 */
var insertStuInfo = function(){
	//console.log("add");
	var stuName = $("stuName").value.trim();//去空
	var stuCode = $("stuCode").value.trim();
	var stuAge = $("stuAge").value.trim();
	
	//创建学生对象信息
	var stu = {
		id : getRowId(),
		name:stuName,
		code:stuCode,
		age:stuAge
	};
	//验证表单
	if(!validataForm(stu)){
		return;//方法终止
	}
	//将学生信息保存到本地存储里
	addStuData(stu);
	
	//新增一个学生信息添加到表格中
	insertStuTr(stu);
	//更新序号
	sortGridData();
	//清空输入框
	emptyInput();
}
/*
 * 删除学生信息操作 (单行)
 * e代表原函数对象
 */
var delStu = function(e){
	if(confirm("确认删除该行学生信息吗？")){
		
		//需要获取当前行的id
		//HTML5自定义属性：data-*
		
		delStuData(e.closest("td").dataset.stuId);
		e.closest("tr").remove();//移除一行
	//更新序号
	sortGridData();
	}
	
	
}
//用来记录元素所在的行元素
var stuObj;
//记录学生id
var stuEditId;
/*
 * 编辑学生信息，将学生信息赋值到输入框中
 */
var toEditStu = function(e){
	stuObj = e.closest("tr");
	
	stuEditId = e.closest("td").dataset.stuId;
	
	$("stuName").value = stuObj.getElementsByClassName("stuNameTD")[0].innerHTML;
	$("stuCode").value = stuObj.getElementsByClassName("stuCodeTd")[0].innerHTML;
	$("stuAge").value = stuObj.getElementsByClassName("stuAgeTd")[0].innerHTML;
	
	//移除disabled属性
	$('stuSaveBtn').removeAttribute("disabled");
	
	//当前状态设置为编辑
	currentFlag = 1;
}
/*
 * 将输入框的值保存下来
 */
var editStu = function(){
	var stuName = $('stuName').value.trim();
	var stuCode = $('stuCode').value.trim();
	var stuAge = $('stuAge').value.trim();
	
	//创建学生对象信息
	var stu = {
		id:stuEditId,//学生id
		name:stuName,
		code:stuCode,
		age:stuAge
	};
	//验证表单
	if(!validataForm(stu)){
		return;//方法终止
	}
	
	if(confirm("确认保存改行学生信息？")){
		//将数据进行更新
		editStuData(stu);
		//赋值
	stuObj.getElementsByClassName("stuNameTD")[0].innerHTML = stuName;
	stuObj.getElementsByClassName("stuCodeTd")[0].innerHTML = stuCode;
	stuObj.getElementsByClassName("stuAgeTd")[0].innerHTML = stuAge;
	//清空输入框
	emptyInput();
	//将按钮静止
	$("stuSaveBtn").setAttribute("disabled","disabled");
	//当前状态设置为新增
	currentFlag = 0;
	}
	
}
var addEvents = function(){
	//绑定新增按钮事件
	//$("stuAddBtn").onclick=insertStuInfo;
	$("stuAddBtn").setAttribute("onclick","insertStuInfo()");
	//绑定编辑按钮事件
	$("stuSaveBtn").onclick=editStu;
	//姓名输入框绑定键盘事件（回车事件）
	$("stuName").onckeydown=function(event){
		if(event.keyCode == 13){
			if(currentFlag = 0){
				insertStuInfo();
			}else{
				editStu();
			}
		}
	}
	//学号输入框绑定键盘事件（回车事件）
	$("stuCode").onckeydown=function(event){
		if(event.keyCode == 13){
			if(currentFlag = 0){
				insertStuInfo();
			}else{
				editStu();
			}
		}
	}
	//年龄输入框绑定键盘事件（回车事件）
	$("stuAge").onckeydown=function(event){
		if(event.keyCode == 13){
			if(currentFlag = 0){
				insertStuInfo();
			}else{
				editStu();
			}
		}
	}
	
}
/*
 * 清空输入框的值
 */
var emptyInput = function(){
	$("stuName").value = "";
	$("stuCode").value ="";
	$("stuAge").value = "";
	
}
/*
 *验证表单 ,stu是一个学生信息对象
 */
var validataForm = function(stu){
	//姓名验证，不能为空
	if(stu.name.length == 0){
		$("stuNameMessage").innerHTML = "姓名不能为空！";
		//提示信息后，获取姓名输入框焦点
		$("stuName").focus();
		return false;
	}else if(stu.name.length > 7){
		$("stuNameMessage").innerHTML = "姓名长度不能大于7";
		$("stuName").focus();
		return false;
	}else{
		$("stuNameMessage").innerHTML = "";
	}
	//学号验证
	if(stu.code.length == 0){
		$("stuCodeMessage").innerHTML = "学号不能为空！";
		//提示信息后，获取姓名输入框焦点
		$("stuCode").focus();
		return false;
	}else if(stu.code.length > 7){
		$("stuCodeMessage").innerHTML = "学号长度不能大于7";
		$("stuCode").focus();
		return false;
	}else{
		$("stuCodeMessage").innerHTML = "";
	}
	//年龄验证
	if(stu.age.length == 0){
		$("stuAgeMessage").innerHTML = "年龄不能为空！";
		//提示信息后，获取姓名输入框焦点
		$("stuAge").focus();
		return false;
	}else if(stu.age.length > 2 ){
		$("stuAgeMessage").innerHTML = "年龄长度不能大于2";
		$("stuAge").focus();
		return false;
	}else{
		$("stuAgeMessage").innerHTML = "";
	}return true;
};


/*
 * 页面加载完成后，执行相关代码
 */
window.onload = function(){
	initGridData();
	
	//绑定事件
	addEvents();
	
	//设置姓名输入框获取焦点
	$('stuName').focus();
};

注释已经融入代码里面，保存下来供自己学习总结分享，如有错误请大神指正我这个小菜鸟，不喜勿喷！！

小弦的博客

关注

10
点赞
踩
57

收藏

觉得还不错? 一键收藏
2
评论
学生信息管理页面HTML+CSS+JavaScript基础开发

简单的学生信息表页面需求分析：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>学生信息管理操作（HTML+css+JavaScript复习作业）</title> <link href="css/index_cs...
复制链接

扫一扫