【javascript|jQuery实现一个学生成绩单录入系统】使用jQuery实现了数据的增删改查
学生成绩表成绩录入查询系统
="./jquery.js">>
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;
}
注：1.空白即为缺考 2.点击隐藏可使手机号等隐藏
学生成绩表成绩录入查询系统
序号
姓名
学号
班级
语文
数学
英语
物理
化学
生物
历史
地理
政治
平均成绩
电话
住址
备注
操作
1
王青雪
20000
86
120
96
77
88
87
89
86
95
删除
2
暨攸然
19001
123
117
89
98
99
92
91
93
94
删除
3
越珏
21002
120
120
80
80
80
80
80
80
80
删除
输入查询统计操作区
序号
姓名
学号
班级
语文
数学
英语
物理
化学
生物
历史
地理
政治
电话
住址
备注
操作
重置
录入系统
="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的那个td
var 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 = $("").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的内容还原成tdtext
currTd.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("" + $(".score tbody tr").length + " ");
//序号
$(ismark).append("" + var14[1] + " ");
//姓名
$(ismark).append("" + var14[2] + " ");
//学号
$(ismark).append("");
//班级
$(ismark).append("" + var14[4] + " ");
$(ismark).append("" + var14[5] + " ");
$(ismark).append("" + var14[6] + " ");
$(ismark).append("" + var14[7] + " ");
$(ismark).append("" + var14[8] + " ");
$(ismark).append("" + var14[9] + " ");
$(ismark).append("" + var14[10] + " ");
$(ismark).append("" + var14[11] + " ");
$(ismark).append("" + var14[12] + " ");
$(ismark).append("删除 ");
$(ismark).append("")
// 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("" + $(this).parent().html() + " ")
}
});
})/**年级下拉选择**/
$('#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 = groupname12
scoretotal2 = 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("" + $(this).parent().html() + " ")
console.log(11);
$(this).parent().children(".checkscore").each(function() {
scoretotal2 += parseInt($(this).text());
});
}
});
$("#result").html("" + groupname12 + "班级总成绩：" + scoretotal2 + ",平均分：" + (scoretotal2 / 2).toFixed(1) + "");
});
//查询单科成绩
$("#sigleone").click(function() {
$("#scorelistquery").html("");
$("#queryone").show();
$("#result").show();
var groupname12 = options1.val() + options2.val();
queryname = groupname12
scoretotal2 = 0;
$("#scorelist td").each(function() {
if ($(this).text() == queryname) {
$("#scorelistquery").append("" + $(this).parent().html() + " ")$(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("" + groupname12 + "班级" + options3.val() + "单科总成绩：" + scoretotal2 + ",平局分：" + (scoretotal2 / 2).toFixed(1) + "");
});
//设置表格边框
$("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.5
var reg = /^\d+(\.5)?$/;
// 输入的成绩只能是整数或者.5
console.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 = false
console.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;
}
}
}
实现效果
文章图片
推荐阅读
- html5|js中“??“和“?.“怎么用（）
- css|在vue2中vue-router的使用
- Vue|Vue 组件化
- 数据结构|for in / for of / forEach 循环
- 前端知识|Vue双向数据绑定原理
- #yyds干货盘点# javascript学习系列(15):数组中的lastIndexOf方法
- 无用代码系列|一张图不用，纯CSS 做个生日贺卡
- #yyds干货盘点#javascript学习系列(11):数组中的findIndex方法
- 多叉树结合JavaScript树形组件实现无限级树形结构（一种构建多级有序树形结构JSON（或XML）数据源的方法）