最近正在补前端的知识,正好要做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;
}