前端学习-学生成绩管理系统(纯html+js实现)

avatar
作者
筋斗云
阅读量:20

学生成绩信息管理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>
					
					<legend>学生信息录入legend>
					
					<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>
					
					<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>2015option>
      								<option>2016option>
      								<option>2017option>
      								<option>2018option>
      								<option>2019option>
    							select>
  							div>
					div>
					
					<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>
					
					<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>
					
					<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>
					
					<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>
					
					<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.cnh6>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插件库

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!