演示网址：前端学习-学生成绩管理系统(纯html+js实现)
一、总体介绍
本次学生成绩管理系统为纯前端设计，实现较为简单，但是功能实现起来比较繁琐，适合初学者实现本系统。包括html，js，css，主要任务为js逻辑设计，目录分为gradeList.html为唯一html，展示学生成绩管理，css文件夹下的文件修饰页面，js文件夹下的文件控制底层的逻辑实现(本项目js基本由jquery实现)。
- 用户点击“新增”按钮，清空下方form中的输入元素；当用户输入成绩相关信息后，点击“提交”按钮，根据学号和科目进行输入成绩重复性判断，如果学号和成绩不重复将用户输入复制到上方table元素的新增行；
- 用户点击“修改”超链接，将用户选中行的相关内容同步到下方的form相关输入元素；用户修改内容后，点击“提交”按钮，根据学号和科目进行输入成绩重复性判断，如果学号和成绩不重复将用户输入复制到上方table元素的用户修改行；
- 用户点击“删除”超链接，弹出确认对话框；用户确认删除后，删除table元素中用户选中的行。
- 使用JavaScript对用户输入信息进行验证(非空+必要的正确性)。
- 按照学号和姓名进行查询 （js实现）
- 科目和成绩(范围)进行查询（js实现）
二、具体功能介绍
整体样式
body内代码：
<body>
<div class="layui-fluid layadmin-homepage-fluid" style="background: #fff;width:90%;margin:0 auto;">
<div id="page">
<h1>学生成绩信息管理</h1>
<table id="table" class="reponsetable" ></table>
<script type="text/html" id="editer">
<a class="layui-btn layui-btn-xs" onclick="edittr(this)">修改</a>
<a class="layui-btn layui-btn-xs" onclick="deletetr(this)">删除</a>
<a class="layui-btn layui-btn-xs" onclick="uptr(this)">上移</a>
<a class="layui-btn layui-btn-xs" onclick="downtr(this)">下移</a>
</script>
<div class="btn-container">
<button class="layui-btn" onclick="addNew();">新增信息</button>
</div>
<form class="form-horizontal" id="input_form" onsubmit="return submitInfo();">
<fieldset>
<!-- Form Name -->
<legend>学生信息录入</legend>
<!-- Multiple Radios (inline) -->
<div class="control-group">
<label class="control-label" for="">专业</label>
<div class="controls">
<label class="radio inline" for="multipleradiosinline-0-0">
<input type="radio" name="radio_major" id="radio_computer" value="1" checked="checked">
计算机
</label>
<label class="radio inline" for="multipleradiosinline-0-1">
<input type="radio" name="radio_major" id="radio_iot" value="2">
物联网
</label>
<label class="radio inline" for="multipleradiosinline-0-2">
<input type="radio" name="radio_major" id="radio_tongxin" value="3">
通信
</label>
</div>
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="selectbasic-0">年级</label>
<div class="controls">
<select id="select_grade" name="selectbasic-0" class="input-xlarge">
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="textinput-1">学号</label>
<div class="controls">
<input id="input_id" name="input_id" type="text" class="input-xlarge" placeholder="student id" onblur="return checkId();">
<label id="idNumWarn"> </label>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="textinput-2">姓名</label>
<div class="controls">
<input id="input_name" name="input_name" type="text" placeholder="student name" class="input-xlarge" onblur="return checkName();">
<label id="nameWarn"> </label>
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="control-group">
<label class="control-label" for="">性别</label>
<div class="controls">
<label class="radio inline" for="multipleradiosinline-2-0">
<input type="radio" name="radio_sex" id="radio_man" value="1" checked="checked">
男
</label>
<label class="radio inline" for="multipleradiosinline-2-0">
<input type="radio" name="radio_sex" id="radio_women" value="2">
女
</label>
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="control-group">
<label class="control-label" for="">科目</label>
<div class="controls">
<label class="radio inline" for="multipleradiosinline-2-0">
<input type="radio" name="radio_subject" id="radio_ds" value="1" checked="checked">
数据结构
</label>
<label class="radio inline" for="multipleradiosinline-2-0">
<input type="radio" name="radio_subject" id="radio_c" value="2">
c语言程序设计
</label>
<label class="radio inline" for="multipleradiosinline-2-0">
<input type="radio" name="radio_subject" id="radio_java" value="3">
java语言程序设计
</label>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="textinput-3">成绩</label>
<div class="controls">
<input id="input_score" name="input_score" type="text" placeholder="score <=100" class="input-xlarge" onblur="return checkScore();">
<label id="scoreWarn"> </label>
</div>
</div>
</fieldset>
<div class="btn-container" style="display:none" id="btn_edit">
<button class="layui-btn" onclick="return editInfo();">确认修改</button>
</div>
<div class="btn-container" style="display:block" id="btn_add">
<button class="layui-btn" type="submit" >提交</button>
</div>
</form>
<legend>学生信息查询</legend>
<div class="control-group">
<div class="controls">
<input id="input_search" name="input_search" type="text" class="input-xlarge" placeholder="search" onblur="return checkSearch();">
<label id="searchWarn"> </label>
<button class="layui-btn" id="searchById" onclick="return searchById();">学号/姓名查询</button>
<button class="layui-btn" id="searchBySubject" onclick="return searchBySubject();">科目查询</button>
<button class="layui-btn" id="searchByScore" onclick="return searchByScore();">成绩(范围)查询</button>
</div>
</div>
<table id="search_table" class="reponsetable" ></table>
<legend><h6>©copyright aysst.cn</h6></legend>
</div>
</div>
<div id="editcontent" class="alertceng">
<p><span class="title">专业:</span><input type="text" id="major"/></p>
<p><span class="title">年级:</span><input type="text" id="grade"/></p>
<p><span class="title">学号:</span><input type="text" id="id"/></p>
<p><span class="title">姓名:</span><input type="text" id="name"/></p>
<p><span class="title">性别:</span><input type="text" id="sex"/></p>
<p><span class="title">科目:</span><input type="text" id="subject"/></p>
<p><span class="title">成绩:</span><input type="text" id="score"/></p>
</div>
</body>
新增表格中数据
在创建表格时，表格中无数据，所有数据均由json动态填入表格中。
$(function(){ //原始数据，json构建
$('#table').basictable({
breakpoint: 768
});
$("#table").reponsetable({
"id":"table",
"operation": "editer",
"type":"numbers",
"colum": [
{"field": "major","title": "专业"},
{"field": "grade","title": "年级"},
{"field": "id","title": "学号"},
{"field": "name","title": "姓名"},
{"field": "sex","title": "性别"},
{"field": "subject","title": "科目"},
{"field": "score","title": "成绩"}
],
"data": [
{"major": "计算机","grade": "2018","id": 1862801,"name": "张三","sex": "男", "subject": "数据结构", "score": 98},
{"major": "物联网","grade": "2017","id": 1762402,"name": "李四","sex": "女", "subject": "c语言程序设计", "score": 85},
{"major": "通信","grade": "2017","id": 1762303,"name": "王五","sex": "男", "subject": "java语言程序设计", "score": 70}
]
});
})
点击表单提交按钮，填写对应的学生信息，对于每个字段都做了严格的正则判断，学号必须为7为数字，姓名必须为2-4位汉字，成绩必须为0-100，每个选择按钮只能选择一个。提交后执行submitInfo()函数,将获取到用户输入的数据插入"table"中，最终返回false，防止网页刷新。
function submitInfo() {//提交表单信息，表中有的所有信息的判定如上方法
if ((!checkId()) || (!checkName()) || (!checkScore())) {
return false
}
var major;
var majorValue = $('input:radio[name="radio_major"]:checked').val()
if (majorValue==1) {
major = "计算机";
} else if (majorValue==2) {
major = "物联网";
} else {
major = "通信";
};
var grade = $("#select_grade option:selected").text()
var id = $("#input_id").val()
var name = $("#input_name").val()
var sex;
var sexValue = $('input:radio[name="radio_sex"]:checked').val()
if (sexValue==1) {
sex = "男";
} else {
sex = "女";
};
var subject;
var subjectValue = $('input:radio[name="radio_subject"]:checked').val()
if (subjectValue==1) {
subject = "数据结构";
} else if (subjectValue==2) {
subject = "c语言程序设计";
} else {
subject = "java语言程序设计";
}
var score = $("#input_score").val()
var obj = {
"major":major,
"grade": grade,
"id": id,
"name": name,
"sex": sex,
"subject":subject,
"score":score
};
var idSubject = getData();
var inputIdSubject = id + "_" + subject;
if (idSubject.indexOf(inputIdSubject)>=0) {
alert("学号和科目重复，请重新填写！")
return false;
} else {
reponse.addtr(obj, "table");
return false;
}
return false;
}
修改学生信息
修改学习成绩信息是将原有的成绩的信息填入下面的form表单中，点击确认修改将原有的信息覆盖。
点击修改按钮时先将原有的提交按钮隐藏，将原来的隐藏确认修改按钮显示，避免使用提交按钮新增一组数据。
function editInfo() {//编辑信息，只修改信息，不会新增一行到表中
var major;
var majorValue = $('input:radio[name="radio_major"]:checked').val()
if (majorValue==1) {
major = "计算机";
} else if (majorValue==2) {
major = "物联网";
} else {
major = "通信";
};
var grade = $("#select_grade option:selected").text()
var id = $("#input_id").val()
var name = $("#input_name").val()
var sex;
var sexValue = $('input:radio[name="radio_sex"]:checked').val()
if (sexValue==1) {
sex = "男";
} else {
sex = "女";
};
var subject;
var subjectValue = $('input:radio[name="radio_subject"]:checked').val()
if (subjectValue==1) {
subject = "数据结构";
} else if (subjectValue==2) {
subject = "c语言程序设计";
} else {
subject = "java语言程序设计";
}
var score = $("#input_score").val()
var obj = {
"major":major,
"grade": grade,
"id": id,
"name": name,
"sex": sex,
"subject":subject,
"score":score
};
if (checkId() && checkName() && checkScore()) {
reponse.editsavetr(obj, "table");
};
//修改完成后提交按转换回来
document.getElementById("btn_edit").style.display = "none";
document.getElementById("btn_add").style.display = "block";
return false;
}
各输入框判断
1、学号，必须为7位数字
function checkId() {//检查学号是否合适
var id = $("#input_id").val()
console.log("aaa")
var pattern=/^\d{7}$/;
if(id == "" || id == null) {
$("#idNumWarn").html("学号不能为空！");
return false;
} else if (!checkIdReg(id)) {
$("#idNumWarn").html("学号必须为7为数字！");
return false;
} else {
$("#idNumWarn").html("");
return true;
}
}
function checkIdReg(theObj) {//正则判断学号是否合格
var reg = /^\d{7}$/;
if (reg.test(theObj)) {
return true;
}
return false;
}
2.姓名，2-4个汉字
function checkName() {//检查姓名是否合适
var name = $("#input_name").val()
if(name == "" || name == null) {
$("#nameWarn").html("姓名不能为空！")
return false;
} else if (!checkNameReg(name)) {
$("#nameWarn").html("姓名必须为2-4个汉字")
return false;
} else {
$("#nameWarn").html("")
return true
}
}
function checkNameReg(theObj) {//正则判断姓名是否合格
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
if (reg.test(theObj)) {
return true;
}
return false;
}
3.分数 0-100
function checkScore() {//检查分数是否合适
var score = $("#input_score").val()
if(score == "" || score == null) {
$("#scoreWarn").html("分数不能为空！")
return false;
} else if (!checkScoreReg(score)) {
$("#scoreWarn").html("分数必须是0-100！")
return false;
} else {
$("#scoreWarn").html("")
return true
}
}
function checkScoreReg(theObj) {//正则判断分数是否合格
var reg = /^[0-9]+.?[0-9]*$/;
if (reg.test(theObj)) {
if ((parseInt(theObj) <= 100) && (parseInt(theObj) >= 0)) {
return true;
}
}
return false;
}
查询部分
有三种方式：
1.学号姓名查询：可以输入学号或者姓名，查询到对应学生成绩信息
先获取到输入框的文本，将表中的数据统计出来再查询输入的文本。最后添加到查询的表格中。
function searchById() { //根据学号和姓名查询
$("#search_table tr:not(:first)").html("");
if (!checkSearch()) {
return false;
}
var input_search = $("#input_search").val();
var names = reponse.Columndata("name", "table");
var ids = reponse.Columndata("id", "table");
var res = getTableData();
if (ids.indexOf(input_search)>=0) {
for (var i = 0; i < res.length; i++) {
if (res[i]["id"] != input_search) {
delete res[i];
}
}
} else if(names.indexOf(input_search)>=0) {
for (var i = 0; i < res.length; i++) {
if (res[i]["name"] != input_search) {
delete res[i];
}
}
} else {
alert("无此记录")
return false
}
res = $.grep(res, function(i){ return i });
console.log(res)
$.grep(res, function(i){ reponse.addtr(i, "search_table"); });
return true;
}
2.科目查询：可以输科目，查询到对应学生成绩信息
先获取到输入框的文本，将表中的数据统计出来再查询输入的文本。最后添加到查询的表格中。
function searchBySubject() { //根据科目查询
$("#search_table tr:not(:first)").html("");
if (!checkSearch()) {
return false;
}
var input_search = $("#input_search").val();
var subjects = reponse.Columndata("subject", "table");
var res = getTableData();
console.log(res, subjects)
if (subjects.indexOf(input_search)>=0) {
for (var i = 0; i < res.length; i++) {
if (res[i]["subject"] != input_search) {
delete res[i];
}
}
} else {
alert("无此记录");
return false;
}
res = $.grep(res, function(i){ return i });
$.grep(res, function(i){ reponse.addtr(i, "search_table"); });
return true;
}
3.成绩查询：可以输入成绩范围，查询到对应学生成绩信息
先获取到输入框的文本（必须为xx-xx），将表中的数据统计出来再查询输入的文本。最后添加到查询的表格中，若查询不到结果则会提示无结果。
function searchByScore() {
$("#search_table tr:not(:first)").html("");
if (!checkSearchScore()) {
return false;
}
var input_search = $("#input_search").val()
var scores = reponse.Columndata("score", "table");
var input_score = input_search.split("-");
var res = getTableData();
// console.log(res, input_score, scores)
scores = $.grep(scores, function(i){
if(parseInt(input_score[1]) >= parseInt(i) && parseInt(input_score[0]) <= parseInt(i))
return i });
// console.log(scores)
if (scores.length != 0) {
for (var i = 0; i < res.length; i++) {
if ((parseInt(res[i]["score"]) > parseInt(input_score[1])) || (parseInt(res[i]["score"]) < parseInt(input_score[0]))) {
delete res[i];
}
}
} else {
alert("无此记录");
return false;
}
res = $.grep(res, function(i){ return i });
console.log(res)
$.grep(res, function(i){ reponse.addtr(i, "search_table"); });
return true;
}
总结
通过本次前端学习，学习到了很多html和js方面的知识，虽然之前做过相应的前端，但是都是些简单的操作，这次的js操作比较复杂繁琐，对学习前端很有帮助
本系统的前端模板来自 jquery插件库http://www.jq22.com/
