【前端学习之路】学生信息管理系统

其他 2020-02-11 00:14:36 阅读次数: 0

最近正在补前端的知识，正好要做Java语言高级开发的作业，这次的作业是使用HTML+CSS+JavaScript制作一个满足某些功能的学生信息管理系统。

目录

HTML部分

主要分为三大模块，第一个是页头和搜索模块，第二个是信息展示模块，第三个是信息输入模块。HTML元素的样式使用了BootStrap提供的样式，这里对BootStrap表示鸣谢。具体不同模块的代码如下：

页头和搜索模块

<script type="text/javascript">
	$(function () { 
		$("[data-toggle='tooltip']").tooltip();
	});
</script>
<div class="page-header">
 		<h1>
 			学生信息管理系统
 			<small>河海大学</small> 
 		</h1>
 		<div>
  		<form class="navbar-form navbar-right" role="search" onsubmit="return search();">
	  		<div class="form-group">
	    		<input type="text" id="query" class="form-control" placeholder="输入查询条件">
	  		</div>
	  		<button type="submit" class="btn btn-default">搜索</button> 
			<a data-toggle="tooltip" data-html="true" data-animation="true" data-container="body" data-placement="bottom" title="输入格式:<br/>学号(空格)姓名 或<br/>科目(空格)成绩范围(例:70-80)">
				<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
			</a>
		</form>
	</div>
</div>

$(function(){代码块});

$(function(){代码块});
等同于
$(document).ready(function(){代码块});
解释：
$(document).ready(function(){代码块}) 里的代码块是在页面内容都加载完才执行的，也就是说在界面加载完会执行$(function(){代码块})里的"代码"。

tooltip鼠标悬浮显示信息

使用BootStrap中的tooltip样式创建鼠标悬浮其上显示信息的功能，它的使用分为两部分，一部分是在HTML中指定标签：

<a data-toggle="tooltip" data-html="true" data-animation="true" data-container="body" data-placement="bottom" title="输入格式:<br/>学号(空格)姓名 或<br/>科目(空格)成绩范围(例:70-80)">
	<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</a>

其中，使用data-html=“true” 将内容的显示设置成HTML格式，使用title属性指定显示的内容。另一部分需要写在js中：

<script type="text/javascript">
	$(function () { 
		$("[data-toggle='tooltip']").tooltip();
	});
</script>

信息展示模块

信息展示模块使用了表格（table）来展示学生信息。

信息输入模块

使用form表单作为信息输入模块，点击提交按钮，执行js函数，判断提交信息并修改界面。

CSS部分

使用BootStrap框架，官网地址：
BootStrap

JavaScript部分

由于自己JS用的还不熟练，所以会出现原生JS代码交杂JQuery的情况，之后会努力。
首先定义两个全局变量，具体用途后面讲：

/*设置全局变量*/
var global_change=0;//如果为0，则是不经过修改直接提交的信息，如果是1，则是经过修改的步骤进行的提交
var global_obj=null;//记录下需要修改的那个元素的obj

功能一

用户点击“新增”按钮，清空下方form中的输入元素；当用户输入成绩相关信息后，点击“提交”按钮，根据学号和科目进行输入成绩重复性判断，如果学号和成绩不重复将用户输入复制到上方table元素的新增行；

/*向表单中添加新元素*/
function add(){
	if(global_change==1){//如果是对修改那一行进行改变，则先将这行删除，再进行后续的判断和插入
		$(global_obj).parents("tr").remove();
	}
	//获取表单提交信息
	var major=$('input[name="major"]:checked').val();
	var grade=$('#grade-list option:selected').val();
	var id=$('#stu-id').val();
	var name=$('#stu-name').val();
	var sex=$('input[name="sex"]:checked').val();
	var subject=$('input[name="subject"]:checked').val();
	var score=$('#score').val();

	var id_arr=new Array();//获得表格中存在的所有学号
	var subject_arr=new Array();//获得表格中所有科目

	var tb=document.getElementById('table-body');
	var rows=tb.rows;
	for(var i=0;i<rows.length;i++){
		id_arr.push(rows[i].cells[2].innerHTML);
		subject_arr.push(rows[i].cells[5].innerHTML);
	}

	
	if(id==null || id==""){
		alert("学号不能为空");
		return false;
	}
	//也可以对学号或者成绩进行正则表达式的判断
	//用来判断输入的学号或者成绩是不是纯数字,这里没有做
	if(name==null || name==""){
		alert("姓名不能为空");
		return false;
	}

	if(score<0 ||score>100){
		alert("输入成绩有误");
		return false;
	}

	for(var index in id_arr){
		if(id_arr[index]==id && subject_arr[index]==subject){
			alert("学号和科目有重复");
			return false;
		}
	}
	
	//生成HTML字符串
	var table=document.getElementById("table-body").innerHTML;
	table=table+"<tr><td>"+major+"</td><td>"+grade+"</td><td name=\"tstu-id\">"+id+"</td><td>"+name+"</td><td>"+sex+"</td><td name=\"tsubject\">"+subject+"</td><td>"+score+"</td><td><button type=\"button\" class=\"btn btn-info \" onClick=\"change(this);\">修改</button></td><td><button type=\"button\" class=\"btn btn-danger \"   onClick=\"del_tr(this);\" >删除</button></td></tr>"
	//更新table
	document.getElementById("table-body").innerHTML=table;	

	//插入之后就让全局变量置为初始值
	global_change=0;
	global_obj=null;
	//为了不让form提交后进行刷新（或跳转界面），将return值设置为false
	return false;
}

功能二

用户点击“修改”超链接，将用户选中行的相关内容同步到下方的form相关输入元素；用户修改内容后，点击“提交”按钮，根据学号和科目进行输入成绩重复性判断，如果学号和成绩不重复将用户输入复制到上方table元素的用户修改行。

/*修改信息*/
function change(obj){
	console.log("点击了修改按钮");
	//获取需要修改行的具体信息
	var major=$(obj).parents("tr").children("td").get(0).innerHTML;
	var grade=$(obj).parents("tr").children("td").get(1).innerHTML;
	var id=$(obj).parents("tr").children("td").get(2).innerHTML;
	var name=$(obj).parents("tr").children("td").get(3).innerHTML;
	var sex=$(obj).parents("tr").children("td").get(4).innerHTML;
	var subject=$(obj).parents("tr").children("td").get(5).innerHTML;
	var score=$(obj).parents("tr").children("td").get(6).innerHTML;
	
	index=2019-grade;

	//将form中选中修改行的具体信息同步到form中
	$('input[name="major"][value="'+major+'"]').prop("checked","checked");
	$('#grade-list').get(0).selectedIndex=index;
	$('#stu-id').val(id);
	$('#stu-name').val(name);
	$('input[name="sex"][value="'+sex+'"]').prop("checked","checked");
	$('input[name="subject"][value="'+subject+'"]').prop("checked","checked");
	$('#score').val(score);
	global_change=1;
	global_obj=obj;
}

global_change的设置是为了在form表单提交的时候判断是修改后的提交还是正常新增提交，从而设置一个全局flag。
global_obj的设置是为了记录下修改行的对象，便于在修改后提交的情况下删除该行。

功能三

用户点击“删除”超链接，弹出确认对话框；用户确认删除后，删除table元素中用户选中的行。

function del_tr(obj){
	if(confirm("确认要删除该行吗？")==true){
		$(obj).parents("tr").remove();
	}
}

用户点击删除button之后，将当前按钮对象传递到js中，使用confirm函数进行确认，如果用户点击“确定”，则获得当前对象的父对象tr，使用remove将这一行删除。

功能四

设计和实现学生成绩查询功能，设计查询条件输入元素，并使用javascript实现以下功能：
1、按照学号和姓名进行查询
2、科目和成绩(范围)进行查询
查询有固定的输入格式：如果想用学号和姓名进行查询，则输入的格式是：
学号（空格）姓名（例：1762810126 李三）
如果想用科目和成绩范围进行查询，则输入的格式是：
科目（空格）成绩范围（例：数据结构 70-85）
具体的js代码如下，注释很详细：

/*查询*/
function search(){
	var query=$('#query').val();
	//获得输入的两个元素
	var first_ele=query.split(' ')[0];
	var second_ele=query.split(' ')[1];
	
	//使用正则表达式判断输入的是学号+姓名还是科目+成绩范围
	var pattern=/\d/g;
	//var pattern=new RegExp("\\d","g");
	var str=first_ele[0];//只判断第一个字符是不是数字即可做出判断
	var flag=pattern.test(str);

	var major_arr=new Array();//获得表格中所有专业
	var grade_arr=new Array();//获得表格中所有年级
	var id_arr=new Array();//获得表格中所有学号
	var name_arr=new Array();//获得表格中所有姓名
	var sex_arr=new Array();//获得表格中所有性别
	var subject_arr=new Array();//获得表格中所有科目
	var score_arr=new Array();//获得表格中所有成绩

	var tb=document.getElementById('table-body');
	var rows=tb.rows;
	for(var i=0;i<rows.length;i++){
		major_arr.push(rows[i].cells[0].innerHTML);
		grade_arr.push(rows[i].cells[1].innerHTML);
		id_arr.push(rows[i].cells[2].innerHTML);
		name_arr.push(rows[i].cells[3].innerHTML);
		sex_arr.push(rows[i].cells[4].innerHTML);
		subject_arr.push(rows[i].cells[5].innerHTML);
		score_arr.push(rows[i].cells[6].innerHTML);
	}

	if(flag==true){//学号+姓名的查询
		var id_index=new Array();
		var name_index=new Array();
		var result_index=new Array();

		for(var i=0;i<id_arr.length;i++){
			if(first_ele==id_arr[i]){
			id_index.push(i);
			}
		}
		
		for(var i=0;i<name_arr.length;i++){
			if(second_ele==name_arr[i]){
			name_index.push(i);
			}
		}

		for(var i in id_index){
			for(var j in name_index){
				if(id_index[i]==name_index[j]){
					result_index.push(id_index[i]);
				}
			}
		}

		var table_html="<h4>查询结果</h4> <div> <table class=\"table table-bordered\"><thead><tr><th>专业</th><th>年级</th><th>学号</th><th>姓名</th><th>性别</th><th>科目</th><th>成绩</th></thead><tbody>";
		for(var i in result_index){
			table_html=table_html+"<tr><td>"+major_arr[result_index[i]]+"</td><td>"+grade_arr[result_index[i]]+"</td><td>"+id_arr[result_index[i]]+"</td><td>"+name_arr[result_index[i]]+"</td><td>"+sex_arr[result_index[i]]+"</td><td name=>"+subject_arr[result_index[i]]+"</td><td>"+score_arr[result_index[i]]+"</td></tr>";
		}
		table_html=table_html+"</tbody></table></div>";

		document.getElementById("result-table").innerHTML=table_html;
	}
	else{//科目+成绩的查询
		var subject_index=new Array();
		var score_index=new Array();
		var result_index=new Array();

		for(var i=0;i<subject_arr.length;i++){
			if(first_ele==subject_arr[i]){
			subject_index.push(i);
			}
		}
		
		var reg=/\d{2,3}/g;
		var numbers=second_ele.match(reg);
		
		if(parseInt(numbers[0])>parseInt(numbers[1])){
			var temp=numbers[0];
			numbers[0]=numbers[1];
			numbers[1]=temp;
		}

		for(var i=0;i<score_arr.length;i++){
			if(parseInt(score_arr[i])>=parseInt(numbers[0]) && parseInt(score_arr[i])<=parseInt(numbers[1])){
			score_index.push(i);
			}
		}
		

		for(var i in subject_index){
			for(var j in score_index){
				if(subject_index[i]==score_index[j]){
					result_index.push(subject_index[i]);
				}
			}
		}

		var table_html="<h4>查询结果</h4> <div> <table class=\"table table-bordered\"><thead><tr><th>专业</th><th>年级</th><th>学号</th><th>姓名</th><th>性别</th><th>科目</th><th>成绩</th></thead><tbody>";
		for(var i in result_index){
			table_html=table_html+"<tr><td>"+major_arr[result_index[i]]+"</td><td>"+grade_arr[result_index[i]]+"</td><td>"+id_arr[result_index[i]]+"</td><td>"+name_arr[result_index[i]]+"</td><td>"+sex_arr[result_index[i]]+"</td><td name=>"+subject_arr[result_index[i]]+"</td><td>"+score_arr[result_index[i]]+"</td></tr>";
		}

		table_html=table_html+"</tbody></table></div>";

		document.getElementById("result-table").innerHTML=table_html;
	}
	//设置return值为false，防止界面跳转
	return false;
}

完整代码

文件夹结构：
在这里插入图片描述
css文件夹：
在这里插入图片描述
fonts文件夹：
在这里插入图片描述
js文件夹：
在这里插入图片描述
gradeList.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="学生信息管理系统">
    <meta name="author" content="李好洋">
    <link rel="icon" href="./favicon.ico">

    <title>学生信息管理系统</title>

    <!-- 加载bootstrap的css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
    	 /*设置表格文字左右和上下居中对齐*/ 
		#class td,th
			{  
    			vertical-align: middle;
    			text-align: center;  
			}
    </style>

    <!--从网上加载jquery的js-->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!--如果没有正常从网络上加载jquery的话，就加载本地jquery-->
    <script>window.jQuery || document.write('<script src="./js/vendor/jquery.min.js"><\/script>')</script>
    <!--从本地加载bootstrap的js-->
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/my-js.js"></script>

    <script type="text/javascript">
    	//$(function(){代码块});等同于$(document).ready(function(){代码块});
    	//$(document).ready(function(){代码块}) 里的代码块是在页面内容都加载完才执行的
    	//也就是说在界面加载完会执行function(){代码块}里的"代码"
		$(function () { 
			$("[data-toggle='tooltip']").tooltip();
		});
    </script>

  </head>

  <body>
  	<div class=" col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
  	<div class="page-header">
  		<h1>
  			学生信息管理系统
  			<small>河海大学</small> 
  		</h1>
  		<div>
	  		<form class="navbar-form navbar-right" role="search" onsubmit="return search();">
		  		<div class="form-group">
		    		<input type="text" id="query" class="form-control" placeholder="输入查询条件">
		  		</div>
		  		<button type="submit" class="btn btn-default">搜索</button> 
				<a data-toggle="tooltip" data-html="true" data-animation="true" data-container="body" data-placement="bottom" title="输入格式:<br/>学号(空格)姓名 或<br/>科目(空格)成绩范围(例:70-80)">
					<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
				</a>
			</form>
		</div>
	</div>

	<h4>学生成绩列表</h4>
	<div id="class">
	<table class="table table-bordered">
  		<thead>
  			<tr>
  				<th>专业</th>
  				<th>年级</th>
  				<th>学号</th>
  				<th>姓名</th>
  				<th>性别</th>
  				<th>科目</th>
  				<th>成绩</th>
  				<th colspan="2"><span style="text-align:center">操作</span></th>
  			</tr>
  		</thead>
		<tbody id="table-body">
			<tr>
				<td>计算机</td>
				<td>2017</td>
				<td name="tstu-id">1762810126</td>
				<td>李四</td>
				<td>男</td>
				<td name="tsubject">数据结构</td>
				<td>85</td>
				<td><button type="button" class="btn btn-info " onClick="change(this);">修改</button></td>
				<td><button type="button" class="btn btn-danger "  onClick="del_tr(this);">删除</button></td>
			</tr>
			<tr>
				<td>计算机</td>
				<td>2017</td>
				<td name="tstu-id">1762810101</td>
				<td>周三</td>
				<td>男</td>
				<td name="tsubject">数据结构</td>
				<td>95</td>
				<td><button type="button" class="btn btn-info " onClick="change(this);">修改</button></td>
				<td><button type="button" class="btn btn-danger " onClick="del_tr(this);">删除</button></td>
			</tr>
		</tbody>
	</table>
	</div>
	
	<button type="button" style="position:absolute;right:4.8%;" class="btn btn-warning" onClick="reset();">新增</button>
	
	<div class="page-header">
	<h4>学生信息录入</h4>
	</div>

	<div>
		<form class="form-horizontal" method="post" onsubmit="return add();">
			<div class="form-group">
				<label class="col-md-1">专业:</label>
				<div class="col-md-11">
					<label class="radio-inline">
					  <input type="radio" name="major" id="major1" value="计算机" checked>计算机
					</label>
					<label class="radio-inline">
					  <input type="radio" name="major" id="major2" value="物联网">物联网
					</label>
					<label class="radio-inline">
					  <input type="radio" name="major" id="major3" value="通信">通信
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-1" style="vertical-align: middle"> 年级:</label>
				<div class="col-md-11">
					<select style="width:12%" class="form-control" name="grade" id="grade-list">
						<option>2019</option>
						<option>2018</option>
						<option>2017</option>
						<option>2016</option>
						<option>2015</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-1">学号:</label>
				<div class="col-md-11">
					<input class="form-control" id="stu-id" placeholder="学号" style="width:30%">
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-1">姓名:</label>
				<div class="col-md-11">
					<input class="form-control" id="stu-name" placeholder="姓名" style="width:30%">
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-1">性别:</label>
				<div class="col-md-11">
					<label class="radio-inline">
					  <input type="radio" name="sex" id="sex1" value="男" checked>男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="sex" id="sex2" value="女">女
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-1">科目:</label>
				<div class="col-md-11">
					<label class="radio-inline">
					  <input type="radio" name="subject" id="subject1" value="数据结构" checked>数据结构
					</label>
					<label class="radio-inline">
					  <input type="radio" name="subject" id="subject2" value="C语言程序设计">C语言程序设计
					</label>
					<label class="radio-inline">
					  <input type="radio" name="subject" id="subject3" value="Java语言程序设计">Java语言程序设计
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-md-1">成绩:</label>
				<div class="col-md-11">
					<input class="form-control" id="score" placeholder="成绩" style="width:30%">
				</div>
			</div>
			<input type="submit" class="btn btn-primary" value="提交" />
		</form>
	</div>

    <div id="result-table">
    </div>
    </div>
  </body>
</html>

my-js.js

/*设置全局变量*/
var global_change=0;//如果为0，则是不经过修改直接提交的信息，如果是1，则是经过修改的步骤进行的提交
var global_obj=null;//记录下需要修改的那个元素的obj

/*向表单中添加新元素*/
function add(){
	if(global_change==1){//如果是对修改那一行进行改变，则先将这行删除，再进行后续的判断和插入
		$(global_obj).parents("tr").remove();
	}
	//获取表单提交信息
	var major=$('input[name="major"]:checked').val();
	var grade=$('#grade-list option:selected').val();
	var id=$('#stu-id').val();
	var name=$('#stu-name').val();
	var sex=$('input[name="sex"]:checked').val();
	var subject=$('input[name="subject"]:checked').val();
	var score=$('#score').val();

	var id_arr=new Array();//获得表格中存在的所有学号
	var subject_arr=new Array();//获得表格中所有科目

	var tb=document.getElementById('table-body');
	var rows=tb.rows;
	for(var i=0;i<rows.length;i++){
		id_arr.push(rows[i].cells[2].innerHTML);
		subject_arr.push(rows[i].cells[5].innerHTML);
	}

	
	if(id==null || id==""){
		alert("学号不能为空");
		return false;
	}
	//也可以对学号或者成绩进行正则表达式的判断
	//用来判断输入的学号或者成绩是不是纯数字,这里没有做
	if(name==null || name==""){
		alert("姓名不能为空");
		return false;
	}

	if(score<0 ||score>100){
		alert("输入成绩有误");
		return false;
	}

	for(var index in id_arr){
		if(id_arr[index]==id && subject_arr[index]==subject){
			alert("学号和科目有重复");
			return false;
		}
	}
	
	//生成HTML字符串
	var table=document.getElementById("table-body").innerHTML;
	table=table+"<tr><td>"+major+"</td><td>"+grade+"</td><td name=\"tstu-id\">"+id+"</td><td>"+name+"</td><td>"+sex+"</td><td name=\"tsubject\">"+subject+"</td><td>"+score+"</td><td><button type=\"button\" class=\"btn btn-info \" onClick=\"change(this);\">修改</button></td><td><button type=\"button\" class=\"btn btn-danger \"   onClick=\"del_tr(this);\" >删除</button></td></tr>"
	//更新table
	document.getElementById("table-body").innerHTML=table;	

	//插入之后就让全局变量置为初始值
	global_change=0;
	global_obj=null;
	//为了不让form提交后进行刷新（或跳转界面），将return值设置为false
	return false;
}

/*重置表单*/
function reset(){
	$('input[name="major"][value="计算机"]').prop("checked","checked");
	$('#grade-list').get(0).selectedIndex=0;
	$('#stu-id').val("");
	$('#stu-name').val("");
	$('input[name="sex"][value="男"]').prop("checked","checked");
	$('input[name="subject"][value="数据结构"]').prop("checked","checked");
	$('#score').val("");
	global_change=0;
	global_obj=null;
}

/*删除用户选中的行*/
function del_tr(obj){
	if(confirm("确认要删除该行吗？")==true){
		$(obj).parents("tr").remove();
	}
}

/*修改信息*/
function change(obj){
	console.log("点击了修改按钮");
	//获取需要修改行的具体信息
	var major=$(obj).parents("tr").children("td").get(0).innerHTML;
	var grade=$(obj).parents("tr").children("td").get(1).innerHTML;
	var id=$(obj).parents("tr").children("td").get(2).innerHTML;
	var name=$(obj).parents("tr").children("td").get(3).innerHTML;
	var sex=$(obj).parents("tr").children("td").get(4).innerHTML;
	var subject=$(obj).parents("tr").children("td").get(5).innerHTML;
	var score=$(obj).parents("tr").children("td").get(6).innerHTML;
	
	index=2019-grade;

	//将form中选中修改行的具体信息同步到form中
	$('input[name="major"][value="'+major+'"]').prop("checked","checked");
	$('#grade-list').get(0).selectedIndex=index;
	$('#stu-id').val(id);
	$('#stu-name').val(name);
	$('input[name="sex"][value="'+sex+'"]').prop("checked","checked");
	$('input[name="subject"][value="'+subject+'"]').prop("checked","checked");
	$('#score').val(score);
	//为了在form表单提交的时候判断是修改后的提交还是正常新增提交，而使用的全局flag
	global_change=1;
	//记录下修改行的对象，便于在修改后提交的情况下删除该行
	global_obj=obj;
}

/*查询*/
function search(){
	var query=$('#query').val();
	//获得输入的两个元素
	var first_ele=query.split(' ')[0];
	var second_ele=query.split(' ')[1];
	
	//使用正则表达式判断输入的是学号+姓名还是科目+成绩范围
	var pattern=/\d/g;
	//var pattern=new RegExp("\\d","g");
	var str=first_ele[0];//只判断第一个字符是不是数字即可做出判断
	var flag=pattern.test(str);

	var major_arr=new Array();//获得表格中所有专业
	var grade_arr=new Array();//获得表格中所有年级
	var id_arr=new Array();//获得表格中所有学号
	var name_arr=new Array();//获得表格中所有姓名
	var sex_arr=new Array();//获得表格中所有性别
	var subject_arr=new Array();//获得表格中所有科目
	var score_arr=new Array();//获得表格中所有成绩

	var tb=document.getElementById('table-body');
	var rows=tb.rows;
	for(var i=0;i<rows.length;i++){
		major_arr.push(rows[i].cells[0].innerHTML);
		grade_arr.push(rows[i].cells[1].innerHTML);
		id_arr.push(rows[i].cells[2].innerHTML);
		name_arr.push(rows[i].cells[3].innerHTML);
		sex_arr.push(rows[i].cells[4].innerHTML);
		subject_arr.push(rows[i].cells[5].innerHTML);
		score_arr.push(rows[i].cells[6].innerHTML);
	}

	if(flag==true){//学号+姓名的查询
		var id_index=new Array();
		var name_index=new Array();
		var result_index=new Array();

		for(var i=0;i<id_arr.length;i++){
			if(first_ele==id_arr[i]){
			id_index.push(i);
			}
		}
		
		for(var i=0;i<name_arr.length;i++){
			if(second_ele==name_arr[i]){
			name_index.push(i);
			}
		}

		for(var i in id_index){
			for(var j in name_index){
				if(id_index[i]==name_index[j]){
					result_index.push(id_index[i]);
				}
			}
		}

		var table_html="<h4>查询结果</h4> <div> <table class=\"table table-bordered\"><thead><tr><th>专业</th><th>年级</th><th>学号</th><th>姓名</th><th>性别</th><th>科目</th><th>成绩</th></thead><tbody>";
		for(var i in result_index){
			table_html=table_html+"<tr><td>"+major_arr[result_index[i]]+"</td><td>"+grade_arr[result_index[i]]+"</td><td>"+id_arr[result_index[i]]+"</td><td>"+name_arr[result_index[i]]+"</td><td>"+sex_arr[result_index[i]]+"</td><td name=>"+subject_arr[result_index[i]]+"</td><td>"+score_arr[result_index[i]]+"</td></tr>";
		}
		table_html=table_html+"</tbody></table></div>";

		document.getElementById("result-table").innerHTML=table_html;
	}
	else{//科目+成绩的查询
		var subject_index=new Array();
		var score_index=new Array();
		var result_index=new Array();

		for(var i=0;i<subject_arr.length;i++){
			if(first_ele==subject_arr[i]){
			subject_index.push(i);
			}
		}
		
		var reg=/\d{2,3}/g;
		var numbers=second_ele.match(reg);
		
		if(parseInt(numbers[0])>parseInt(numbers[1])){
			var temp=numbers[0];
			numbers[0]=numbers[1];
			numbers[1]=temp;
		}

		for(var i=0;i<score_arr.length;i++){
			if(parseInt(score_arr[i])>=parseInt(numbers[0]) && parseInt(score_arr[i])<=parseInt(numbers[1])){
			score_index.push(i);
			}
		}
		

		for(var i in subject_index){
			for(var j in score_index){
				if(subject_index[i]==score_index[j]){
					result_index.push(subject_index[i]);
				}
			}
		}

		var table_html="<h4>查询结果</h4> <div> <table class=\"table table-bordered\"><thead><tr><th>专业</th><th>年级</th><th>学号</th><th>姓名</th><th>性别</th><th>科目</th><th>成绩</th></thead><tbody>";
		for(var i in result_index){
			table_html=table_html+"<tr><td>"+major_arr[result_index[i]]+"</td><td>"+grade_arr[result_index[i]]+"</td><td>"+id_arr[result_index[i]]+"</td><td>"+name_arr[result_index[i]]+"</td><td>"+sex_arr[result_index[i]]+"</td><td name=>"+subject_arr[result_index[i]]+"</td><td>"+score_arr[result_index[i]]+"</td></tr>";
		}

		table_html=table_html+"</tbody></table></div>";

		document.getElementById("result-table").innerHTML=table_html;
	}
	//设置return值为false，防止界面跳转
	return false;
}
lhysama
发布了61 篇原创文章 · 获赞 16 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_41427568/article/details/103251311
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022