使用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>   
<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的那个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 = $("<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的内容还原成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("<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 = 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("<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 = groupname12
scoretotal2 = 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.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;
}
}
}
</script>
</body>
</html>
实现效果
