简单的学生信息表页面
需求分析:
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();
};
注释已经融入代码里面,保存下来供自己学习总结分享,如有错误请大神指正我这个小菜鸟,不喜勿喷!!