jQuery实现一个学生成绩单录入系统

使用jQuery实现了数据的增删改查

<!DOCTYPE html>
<html><head><title>学生成绩表成绩录入查询系统</title><script src="./jquery.js"></script><!--引入jq库--><style>table {border-spacing: 0;/*去掉单元格间隙*/}table thead tr th {border: 1px solid black;}/**设置表格边框**/td {border: 1px solid black;}.luru td {width: 50px}/**设置表格单元格宽度**/.luru td input {width: 50px}/**设置输入框宽度**/.mark {background-color: #adadf3;}/*设置背景颜色*/input {width: 40px;border: 0;}#show {width: 100px;height: 20px;background-color: coral;border-radius: 10px;float: right;margin-right: 130px;text-align: center;margin-top: 20px;}#show a {text-decoration: none;color: black;}</style>
</head><body><p>注：1.空白即为缺考 2.点击隐藏可使手机号等隐藏</p><!--设置标题--><h3 style="text-align: center;">学生成绩表成绩录入查询系统</h3><!--学生成绩表格--><table id="tableId" style="width:1200px;height: auto;margin:0 auto;border: 1px solid black" class="score"><!--设置表格头部--><thead><tr><th>序号</th><th>姓名</th><th onclick="sortAble('tableId', 3, 'int')">学号</th><th class="hidetag">班级</th><th>语文</th><th>数学</th><th>英语</th><th>物理</th><th>化学</th><th>生物</th><th>历史</th><th>地理</th><th>政治</th><th>平均成绩</th><th class="hidetag">电话</th><th class="hidetag">住址</th><th class="hidetag">备注</th><th>操作</th></tr></thead><!--设置表格内容--><tbody id="scorelist"><tr class='mark'><td class="order">1</td><td class='checkname'>王青雪</td><td class='idcard'>20000</td><td class='checkgroup hidetag'>高三7班</td><td class='checkscore'>86</td><td class='checkscore'>120</td><td class='checkscore'>96</td><td class='checkscore'>77</td><td class='checkscore'>88</td><td class='checkscore'>87</td><td class='checkscore'>89</td><td class='checkscore'>86</td><td class='checkscore'>95</td><td class='checkscoreavg'></td><td class='checktel hidetag'>18182065162</td><td class='checkaddr hidetag'>碧桂园18栋1518</td><td class='hidetag'></td><td><a class='del' href='javascript:;'>删除</a></td></tr><tr><td class="order">2</td><td class='checkname'>暨攸然</td><td class='idcard'>19001</td><td class='checkgroup hidetag'>高二7班</td><td class='checkscore'>123</td><td class='checkscore'>117</td><td class='checkscore'>89</td><td class='checkscore'>98</td><td class='checkscore'>99</td><td class='checkscore'>92</td><td class='checkscore'>91</td><td class='checkscore'>93</td><td class='checkscore'>94</td><td class='checkscoreavg'></td><td class='checktel hidetag'>18182074386</td><td class='checkaddr hidetag'>碧桂园29栋1327</td><td class='hidetag'></td><td><a class='del' href='javascript:;'>删除</a></td></tr><tr class='mark'><td class="order">3</td><td class='checkname'>越珏</td><td class='idcard'>21002</td><td class='checkgroup hidetag'>高三7班</td><td class='checkscore'>120</td><td class='checkscore'>120</td><td class='checkscore'>80</td><td class='checkscore'>80</td><td class='checkscore'>80</td><td class='checkscore'>80</td><td class='checkscore'>80</td><td class='checkscore'>80</td><td class='checkscore'>80</td><td class='checkscoreavg'></td><td class='checktel hidetag'>18182097438</td><td class='checkaddr hidetag'>碧桂园15栋5037</td><td class='hidetag'></td><td><a class='del' href='javascript:;'>删除</a></td></tr></tbody></table><div id='show'><a class='show' onclick='isshow()' href='javascript:;'>隐藏</a></div><!--设置标题--><h3 style="text-align: center;">输入查询统计操作区</h3><!--设置成绩录入--><table style="width:1200px;height: auto;margin:0 auto;border: 1px solid black"><thead><tr><th>序号</th><th>姓名</th><th>学号</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th><th>物理</th><th>化学</th><th>生物</th><th>历史</th><th>地理</th><th>政治</th><th>电话</th><th>住址</th><th>备注</th><th>操作</th></tr></thead><tbody><tr class="luru"><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td><input type="text" placeholder="待录入" /></td><td></td><td style="width: 120px"><a class="reset" href="javascript:;">重置</a>&nbsp&nbsp&nbsp<a class="lurunew" href="javascript:;">录入系统</a></td></tr></tbody></table><!--设置成绩查询--><div style="width: 1200px;margin: 0 auto"><input id="queryscoreoneinput" placeholder="请输入学生姓名" /><a id="queryscoreonea" href="javascript:;">查询个人成绩</a><select id="select1"><option>请选择年级</option><option value="高一">高一</option><option value="高二">高二</option><option value="高三">高三</option></select><select id="select2"><option>请选择班级</option><option value="1班">1班</option><option value="2班">2班</option><option value="3班">3班</option><option value="4班">4班</option><option value="5班">5班</option><option value="6班">6班</option><option value="7班">7班</option><option value="8班">8班</option><option value="9班">9班</option></select><a id="querygroup" href="javascript:;">查询班级成绩</a><select id="select3"><option>请选择科目</option><option value="语文">语文</option><option value="数学">数学</option><option value="英语">英语</option><option value="物理">物理</option><option value="化学">化学</option><option value="生物">生物</option><option value="历史">历史</option><option value="地理">地理</option><option value="政治">政治</option></select><a id="sigleone" href="javascript:;">查询单科成绩</a><a class="hideinfo" href="javascript:;">隐藏班级电话住址信息</a></div><!--设置查询结果显示，display: none表示默认隐藏--><table style="width:1200px;height: auto;margin:0 auto;border: 1px solid black;margin-top:30px;display: none" id="queryone"><thead><tr><th>序号</th><th>姓名</th><th>学号</th><th class="hidetag">班级</th><th>语文</th><th>数学</th><th>英语</th><th>物理</th><th>化学</th><th>生物</th><th>历史</th><th>地理</th><th>政治</th><th>平均成绩</th><th class="hidetag">电话</th><th class="hidetag">住址</th><th class="hidetag">备注</th><th>操作</th></tr></thead><tbody id="scorelistquery"></tbody></table><div id="result" style="width: 1200px;margin: 0 auto;display: none">班级总成绩平均分：</div><script type="text/javascript">//按照学号进行排序sortCells(2)var modify = false;//单元格值的修改//找到所有需要编辑的单元格var numTd = $(".score");//给这些单元格注册Click事件numTd.on('click', ".order,.checkname,.checkscore,.checkgroup,.checktel,.checkaddr,.hidetag", function() {//找到当前鼠标点击的那个td,this对应的就是响应了click的那个tdvar currTd = $(this);if (currTd.children("input").length > 0) {//如果当前td中已包含有文本框元素，则不执行click事件return false;}//当前td的内容var tdtext = currTd.html();//清除td的内容currTd.html("");//创建一个文本框//去掉文本框的边框//设置文本框中字体大小和当前td中的字体大小一样,为16px;//设置文本框的背景色和当前td背景色一样//让文本框的宽度和td的宽度一样//将td的内容放到文本框中//将文本框插入到td中去var inputOjb = $("<input type='text' />").css("border-width", "0").css("font-size", "16px").css("background-color", currTd.css("background-color")).width(currTd.width()).val(tdtext).appendTo(currTd);//使文本框的内容添加后就被选中(trigger可以执行javascript中的方法)inputOjb.trigger("focus").trigger("select");//去掉文本框的点击事件,(javascript事件是冒泡型的)inputOjb.click(function() {return false;});//处理文本框上回车和ESC按键的操作inputOjb.keyup(function(event) {//获取当前按下的键盘的键值// 不同的按键可以做不同的事情var keyCode = event.which;//处理回车键 ,不同的浏览器的keycode不同if (keyCode == 13) {//保存当前输入的内容var inputText = $(this).val();currTd.html(inputText);}//处理ESC键的操作if (keyCode == 27) {//将当前TD的内容还原成tdtextcurrTd.html(tdtext);}});})//计算平均数calcuavg();function calcuavg() {$(".checkscoreavg").each(function() {scoretotal = 0;sum = 0// 对所有成绩进行求和$(this).parent().children(".checkscore").each(function() {if ($(this).text() == '') {console.log(1111);} else {sum = $(this).length;scoretotal += parseInt($(this).text());}});// 平均成绩保留一位小数$(this).text((scoretotal / 9).toFixed(1));});}/**重置按钮**/$(".reset").click(function() {$("input").val("");});/**录入系统按钮**/$(".lurunew").click(function() {var var14 = new Array()$(".luru input").each(function() {var14.push($(this).val())if (isShow) {$('.hidetag').show()} else {$('.hidetag').hide()}});if (lurujiaoyan(var14)) { //如果校验成功，则录入lurustudent(var14);}});/**录入系统函数**/function lurustudent(var14) {var ismark = "";var addlength = $("#scorelist").children().length + 1;if ($("#scorelist").children().length % 2 == 0) {$("#scorelist").append("<tr class='mark' id='mark" + addlength + "' style='border:1px solid'></tr>")ismark = "#mark" + addlength;} else {$("#scorelist").append("<tr id='notmark" + addlength + "' style='border:1px solid'></tr>")ismark = "#notmark" + addlength;}$(ismark).append("<td class='order'>" + $(".score tbody tr").length + "</td>"); //序号$(ismark).append("<td class='checkname'>" + var14[1] + "</td>"); //姓名$(ismark).append("<td class='idcard'>" + var14[2] + "</td>"); //学号$(ismark).append("<td class='checkgroup hidetag'>" + var14[3] + "</td>"); //班级$(ismark).append("<td class='checkscore'>" + var14[4] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[5] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[6] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[7] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[8] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[9] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[10] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[11] + "</td>");$(ismark).append("<td class='checkscore'>" + var14[12] + "</td>");$(ismark).append("<td class='checkscoreavg'></td>");$(ismark).append("<td class='checktel hidetag'>" + var14[13] + "</td>"); //电话$(ismark).append("<td class='checkaddr hidetag'>" + var14[14] + "</td>");$(ismark).append("<td class='hidetag'></td>");$(ismark).append("<td><a class='del' οnclick='delDom()' href='javascript:;'>删除</a></td>");$(ismark).append("</tr>")// sortCells(3)calcuavg()sortCells(2)delDom()}//删除按钮$(".del").click(function() {$(this).parent().parent().empty();console.log($(this).parent().parent())// 重新计数const order = document.querySelectorAll('.order');console.log(order);for (let i = 0; i < $(".score tbody tr").length; i++) {order[i].innerHTML = i + 1;}})function delDom() {console.log(1)const del = document.querySelectorAll('.del')const tbody = document.querySelector('tbody')for (var i = 0; i < del.length; i++) {del[i].onclick = function() {tbody.removeChild(this.parentNode.parentNode);console.log(this.parentNode);// 重新排序const order = document.querySelectorAll('.order');console.log(order);for (let i = 0; i < $(".score tbody tr").length; i++) {order[i].innerHTML = i + 1;}}}}/**查询单人成绩按钮**/$("#queryscoreonea").click(function() {$("#queryone").show();queryname = $("#queryscoreoneinput").val()//var var15 = new Array()//console.log(var14);//lurustudent(var14);$("#scorelist td").each(function() {if ($(this).text() == queryname) {$("#scorelistquery").append("<tr>" + $(this).parent().html() + "</tr>")}});})/**年级下拉选择**/$('#select1').change(function() {options1 = $("#select1 option:selected");console.log(options1.val());})/**班级下拉选择**/$('#select2').change(function() {options2 = $("#select2 option:selected");console.log(options2.val());})/**单科下拉选择**/$('#select3').change(function() {options3 = $("#select3 option:selected");console.log(options3.val());})//查询班级成绩按钮$("#querygroup").click(function() {$("#scorelistquery").html("");$("#queryone").show();$("#result").show();var groupname12 = options1.val() + options2.val();console.log(groupname12);queryname = groupname12scoretotal2 = 0;const td = $(".checkgroup");console.log(td.text());$("#scorelist td").each(function() {// console.log($(this).text());// console.log(queryname);if ($(this).text() == queryname) {// $(this).parent().show()// $('#queryone').append($(this).parent())// console.log($(this));$("#scorelistquery").append("<tr>" + $(this).parent().html() + "</tr>")console.log(11);$(this).parent().children(".checkscore").each(function() {scoretotal2 += parseInt($(this).text());});}});$("#result").html("<span style='color:red'>" + groupname12 + "班级总成绩：" + scoretotal2 + ",平均分：" + (scoretotal2 / 2).toFixed(1) + "</span>");});//查询单科成绩$("#sigleone").click(function() {$("#scorelistquery").html("");$("#queryone").show();$("#result").show();var groupname12 = options1.val() + options2.val();queryname = groupname12scoretotal2 = 0;$("#scorelist td").each(function() {if ($(this).text() == queryname) {$("#scorelistquery").append("<tr>" + $(this).parent().html() + "</tr>")$(this).parent().children(".checkscore").each(function(inde) {if (options3.val() == "语文" && inde == 0) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "数学" && inde == 1) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "英语" && inde == 2) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "物理" && inde == 3) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "化学" && inde == 4) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "生物" && inde == 5) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "历史" && inde == 6) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "地理" && inde == 7) {scoretotal2 += parseInt($(this).text());} else if (options3.val() == "政治" && inde == 8) {scoretotal2 += parseInt($(this).text());}});}});$("#result").html("<span style='color:red'>" + groupname12 + "班级" + options3.val() + "单科总成绩：" + scoretotal2 + ",平局分：" + (scoretotal2 / 2).toFixed(1) + "</span>");});//设置表格边框$("td").css("border", "1px solid black");//设置斑马线$(".mark").css("background-color", "#adadf3;");/**以下都是校验函数**///校验姓名$(".checkname").blur(function() {if (!isName($(this).text())) {modify = true;alert("姓名输入错误");} else {modify = false;}});//校验班级$(".checkgroup").blur(function() {if (isGroup($(this).text()) < 0) {modify = true;alert("班级输入错误");} else {modify = false;}});//校验手机号$(".checktel").blur(function() {if (!isPhoneNo($(this).text())) {modify = true;alert("手机号输入错误");} else {modify = false;}});//校验地址$(".checkaddr").blur(function() {if (!isAddr($(this).text())) {modify = true;alert("地址输入错误");} else {modify = false;}});//校验成绩$(".checkscore").blur(function() {if (!isScore($(this).text())) {modify = true;alert("成绩输入错误");} else {modify = false;}});//校验姓名函数function isName(name) {var pattern = /^[\u4E00-\u9FA5]{1,6}$/;return pattern.test(name);}//校验班级名称函数function isGroup(name) {var arr = ["高一1班", "高一2班", "高一3班", "高一4班", "高一5班", "高一6班", "高一7班", "高一8班", "高一9班","高二1班", "高二2班", "高二3班", "高二4班", "高二5班", "高二6班", "高二7班", "高二8班", "高二9班","高三1班", "高三2班", "高三3班", "高三4班", "高三5班", "高三6班", "高三7班", "高三8班", "高三9班"]return $.inArray(name, arr);}//校验电话函数function isPhoneNo(name) {var pattern = /^1[34578]\d{9}$/;return pattern.test(name);}//校验地址函数function isAddr(name) {return name.indexOf("碧桂园") != -1;}//校验分数函数function isScore(name) {alert(name)str = name.toString();strIndex = name.indexOf('.');alert(strIndex)if (strIndex === -1) return true;str = str.substring(strIndex + 1);alert(str)if (str == 5) {return true;} else {return false;}}//录入系统校验function lurujiaoyan(var14) {//校验姓名if (!isName(var14[1])) {alert("姓名输入错误");return false;}//校验班级if (isGroup(var14[3]) < 0) {alert("班级输入错误");return false;}//校验手机号if (!isPhoneNo(var14[13])) {alert("手机号输入错误");return false;}//校验地址if (!isAddr(var14[14])) {alert("地址输入错误");return false;}//校验成绩for (var index = 4; index <= 12; index++) {// 正则表达式实现数字精度为0.5var reg = /^\d+(\.5)?$/;// 输入的成绩只能是整数或者.5console.log(reg.test(var14[index]))// if(var14[index] = "" || var14[index] == null)if (var14[index] == "" || var14[index] == null) {console.log('未录入');} else {if (index >= 4 && index <= 6) {if (var14[index] < 0 || var14[index] > 150 || !reg.test(var14[index])) {alert("成绩输入错误");return false;}} else {if (var14[index] < 0 || var14[index] > 100 || !reg.test(var14[index])) {alert("成绩输入错误");return false;}}}}return true;}let isShow = true;$('.hidetag').show()// 对班级、手机号码、住址、备注栏的隐藏与显示function isshow() {if (isShow) {// 列显示$(".hidetag").show()isShow = falseconsole.log(isShow);// 改变标签的内容$('.show').html('显示更多')} else {// 列隐藏$('.hidetag').hide()isShow = true;console.log(isShow);$('.show').html('隐藏')}return isShow}console.log($(".score tbody tr").length);//重新排序const order = document.querySelectorAll('.order');console.log(order);for (let i = 0; i < $(".score tbody tr").length; i++) {order[i].innerHTML = i + 1;}// 按照学号进行排序function sortCells(type) {var tbs = document.getElementsByTagName("table")[0];var arr = [];var arr2 = [];for (var i = 1; i < tbs.rows.length; i++) {var text = tbs.rows[i].cells[type].innerText;arr.push(text);arr2[text] = i;}if (type == 0) {arr.sort(function(a, b) {return a - b});} else {arr.sort();}var temp = "";for (var j = 1; j < tbs.rows.length; j++) {temp = tbs.rows[j].cells[0].innerText;tbs.rows[j].cells[0].innerText = tbs.rows[arr2[arr[j - 1]]].cells[0].innerText;tbs.rows[arr2[arr[j - 1]]].cells[0].innerText = temp;temp = tbs.rows[j].cells[1].innerText;tbs.rows[j].cells[1].innerText = tbs.rows[arr2[arr[j - 1]]].cells[1].innerText;tbs.rows[arr2[arr[j - 1]]].cells[1].innerText = temp;temp = tbs.rows[j].cells[2].innerText;tbs.rows[j].cells[2].innerText = tbs.rows[arr2[arr[j - 1]]].cells[2].innerText;tbs.rows[arr2[arr[j - 1]]].cells[2].innerText = temp;//        console.log(arr2);for (var i = 1; i < tbs.rows.length; i++) {var text = tbs.rows[i].cells[type].innerText;arr2[text] = i;}}}</script>
</body></html>

实现效果

jQuery实现一个学生成绩单录入系统相关推荐

学生信息系统求助_一个学生信息录入和查询的系统
我们asp.net 作业大神帮帮忙. 一个学生信息录入和查询的系统.主要分成以下几个页面.我在描述的时候,请大家对照课本找到相关章节并做上记号,方便后面的制作. 首先需要大家制作一个数据库.这个数据库 ...
学生信息录入系统java代码
学生信息录入系统可以实现学生本身账号密码登陆,然后录入自己关键信息(其中,带*的为必填)最后会在电脑f盘生成一个自己信息录入完成的文件,并且可以提交信息,进而将文件中的信息展示出来.我觉得这部分的难 ...
利用C语言结构体实现学生成绩录入系统
利用C语言结构体实现学生成绩录入系统 ##功能介绍密码功能嵌入于主函数中,初始密码为:123456(可根据需要修改) 输入1可以调用add函数对学生的基本信息以及成绩进行输入输入2则调用print ...
java录入学生信息_java实现学生成绩录入系统
本文为大家分享了java实现学生成绩录入系统,供大家参考,具体内容如下 1.学生类,包括学生的姓名和各科成绩 public class Score { public String name; publ ...
基于JavaEE的学生信息录入系统的设计与实现
该项目采用JavaWeb进行开发,在功能上实现了管理员的登录,在系统界面中系统管理员可以对学生信息进行录入,对学生信息进行查询,并能够对学生的信息进行修改和删除等.下载地址:http://www. ...
android实现学生信息录入系统
/* 设计如下四个界面,界面分别为"开始界面"(MainActivity)."基本信息界面"(BasicInfoActivity)."院系专业界面&q ...
学生成绩录入系统与查询
package zhang; import java.math.BigDecimal; import java.util.Scanner; public class str { public stat ...
简单的学生成绩录入查询系统
import java.util.Scanner; public class Main {public static void avgst(double ui[],String st) {//函数av ...
Vue指令练习实例-学生信息录入
很好的一个可以感受Vue.js的MVVM模型,数据和模型双向绑定的实例练习. <!doctype html> <html lang="en"> <he ...

jQuery实现一个学生成绩单录入系统

jQuery实现一个学生成绩单录入系统相关推荐

最新文章

热门文章