HTML
<!DOCTYPE html>
<html>
<head>
<title>学生系统</title>
<style type="text/css">
.nianji{
width:310px;
height:1000px;
border:1px solid black;培训
}
table.hovertable{
font-size: 15px;
border-color: #999999;
border-collapse: collapse;
padding-left: 20px;
}
table.hovertable td{
width: 132px;
height: 18px;
border-width: 1px;
padding: 10px;
border-style:solid;
border-color: #a9c6c9;
font-weight:bold;
}
table.student{
font-size: 7px;
border-color: #999999;
border-collapse: collapse;
padding-left: 20px;
}
table.student td{
width: 41px;
height: 18px;
border-width: 1px;
padding: 10px;
border-style:solid;
border-color: #a9c6c9;
font-weight:bold;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="xueSheng.js"></script>
</head>
<body>
<div class="nianji">
<p style="font-size: 14px;">年级名称 : <input type="text" id="grade" name="gradeName" style="background-color: #F2F2F2;border:0px;height: 20px;width: 230px;"></p>
<p><button id="addBtn">年级增加</button></p>
<table class="hovertable">
<thead>
<tr>
<td>年级编号</td>
<td>年级名称</td>
<td>年级操作</td>
</tr>
</thead>
<tbody id="gradeTbody">
</tbody>
</table>
<br><br>
<p style="font-size: 14px;">班级名称 : <input type="text" id="cla" name="className" style="background-color: #F2F2F2;border:0px;height: 20px;width: 230px;"></p>
<p><button id="claAdd">班级增加</button></p>
<p style="font-size: 14px;">
选择年级 :
<select id="select">
</select>
</p>
<br><br><br><br>
<table class="hovertable">
<thead>
<tr>
<td>所属年级</td>
<td>班级名称</td>
<td>班级操作</td>
</tr>
</thead>
<tbody id="claTbody">
</tbody>
</table>
<br><br>
<p style="font-size: 14px;">学生名称 : <input type="text" id="stu" name="stuName" style="background-color: #F2F2F2;border:0px;height: 20px;width: 230px;"></p>
<p><button id="stuAdd">学生增加</button></p>
<span style="font-size: 14px;">
选择年级 :
<select id="gradeSelect">
</select>
</span>
<span style="font-size: 14px;">
选择班级 :
<select id="claSelect">
</select>
</span>
<br><br><br><br><br>
<table class="student">
<thead>
<tr>
<td>所属年级</td>
<td>所属班级</td>
<td>学生编号</td>
<td>学生名称</td>
<td>学生操作</td>
</tr>
</thead>
<tbody id="stuTbody">
</tbody>
</table>
</div>
</body>
</html>
JS 代码
$(function (){
var gradeArr=[];
var classArr=[];
var stuArr=[];
//年级增加
$("#addBtn").click(function (){
var gradeName=$("input[name='gradeName']").val();
var grade={};
grade.name=gradeName;
if(gradeName==""){
return alert("请填写年级名称");
}
var $tbody=$("#gradeTbody");
var code=[];
code.push("<tr>");
code.push("<td flag='num'>"+(maxNo()+1)+"</td>");
code.push("<td>"+grade.name+"</td>");
code.push("<td><a href='#' onclick='deleteGrade(this)'>删除</a></td>");
code.push("</tr>");
$tbody.append(code.join());
var select=[];
select.push("<option>"+grade.name+"</option>");
$("#select").append(select.join());
var gradeSelect=[];
gradeSelect.push("<option>"+grade.name+"</option>");
$("#gradeSelect").append(gradeSelect.join());
gradeArr.push($tbody);
})
//年级删除
function deleteGrade(_this){
var $this=$(_this);
var $tr=$this.parents("tr");
$tr.remove();
for (var i = 0; i < classArr.length; i++) {
classArr[i].remove();
}
for (var i = 0; i < stuArr.length; i++) {
stuArr[i].remove();
}
}
//求最大数
function maxNo(){
var max=0;
var tr=$("table tbody tr");
if(tr.length==0){
max=0;
}else{
var td=$("table tbody tr td[flag='num']");
$.each(td,function(index,item){
var num=parseInt($(item).text());
if(num>max){
max=num;
}
})
}
return max;
}
window.deleteGrade=deleteGrade;
//班级增加
$("#claAdd").click(function (){
var claName=$("input[name='className']").val();
var gradeName = $("#select").val();
var cla={};
cla.name=claName;
cla.gradeName=gradeName;
if(claName=="" || gradeName==null){
return alert("班级名称未填写'或'所属年级未选择");
}
var $tbody=$("#claTbody");
var code=[];
code.push("<tr>");
code.push("<td>"+cla.gradeName+"</td>");
code.push("<td>"+cla.name+"</td>");
code.push("<td><a href='#' onclick='deleteCla(this)'>删除</a></td>");
code.push("</tr>");
$tbody.append(code.join());
var select=[];
select.push("<option>"+cla.name+"</option>");
$("#claSelect").append(select.join());
classArr.push($tbody);
})
//班级删除
function deleteCla(_this){
//var className = $(_this).prev().text();
var $this=$(_this);
var $tr=$this.parents("tr");
$tr.remove();
for (var i = 0; i < stuArr.length; i++) {
stuArr[i].remove();
}
}
window.deleteCla=deleteCla;
//学生增加
$("#stuAdd").click(function (){
var stuName=$("input[name='stuName']").val();
var gradeName=$("#gradeSelect").val();
var claName=$("#claSelect").val();
var stu={};
stu.gradeName=gradeName;
stu.claName=claName;
stu.name=stuName;
if(stuName=="" || gradeName==null || claName==null){
return alert("学生名称未填写'或'所属年级和所属班级未选择");
}
var $tbody=$("#stuTbody");
var code=[];
code.push("<tr>");
code.push("<td>"+stu.gradeName+"</td>");
code.push("<td>"+stu.claName+"</td>");
code.push("<td flag='num'>"+(maxNo()+1)+"</td>");
code.push("<td>"+stu.name+"</td>");
code.push("<td><a href='#' onclick='deleteStu(this)'>删除</a></td>");
code.push("</tr>");
$tbody.append(code.join());
stuArr.push($tbody);
})
//学生删除
function deleteStu(_this){
var $this=$(_this);
var $tr=$this.parents("tr");
$tr.remove();
}
window.deleteStu=deleteStu;
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
