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

简单的学生信息表页面

需求分析：

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,不能使用documentvar 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=1if(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,//学生idname: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();
};

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

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

HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载...
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为 ...
HTML5期末大作业：网站——卡通漫画游戏官方网页 (萌王) 13个页面 HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计
HTML5期末大作业:HTML5期末大作业:网站--卡通游戏官方网页 (萌王)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个 ...
HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末 ...
HTML5期末大作业：游戏网站——网络游戏官网(悦世界) 6个页面 HTML+CSS+JavaScript ~ ~ 学生HTML个人网页作业作品下载...
HTML5期末大作业:游戏网站--网络游戏官网(悦世界) 6个页面 HTML+CSS+JavaScript ~ ~ 学生HTML个人网页作业作品下载临近期末, 你还在为HTML网页设计结课作业,老师 ...
HTML5期末大作业：商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码学生网页课程设计期末作业下载大学生网页设计制作成...
HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末, 你 ...
HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成...
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码学生网页课程设计期末作业下载动漫大学生网页设计制作成临近期末, 你还在为 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...

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

简单的学生信息表页面

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

最新文章

热门文章