学习内容：
1.jQuery的遍历（父子关系、兄弟关系，parent()\parents()\children()等)；
2.使用jQuery完成表单基础的增删改查案例。
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生基本信息维护</title>
<link rel="stylesheet" href="beautify.css">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var stus = [{
id:"1",
username:"小燕子",
stuNum:"001",
sex:"woman",
description:"赵薇"
},
{
id:"2",
username:"紫薇",
stuNum:"002",
sex:"woman",
description:"林心如"
},
{
id:"3",
username:"尔康",
stuNum:"003",
sex:"man",
description:"周杰"
}];
var id = 0; // 全局的ID变量
var saveType = "add";
var editId = -1;
// 重置表格的序号
var resetSeq = function() {
$(".seq").each(function(index, element){
$(element).html(index + 1);
});
}
// 添加表单元素内容到表格中
var saveStu = function() {
var checkFlag = true;
if (saveType == "add") {
if (confirm("确认要添加记录吗？")) {
// step1:获取表单内容
var username = $("#stuFrm").find("input[name='username']").val();
var stuNum = $("#stuFrm").find("input[name='stuNum']").val();
var sex = $("#stuFrm").find("select[name='sex']").val();
var description = $("#stuFrm").find("textarea[name='description']").val();
if (username.trim().length < 2 || username.trim().length > 4) {
checkFlag = false;
}
if (!checkFlag) {
alert("表单验证失败");
return;
}
// step2:构建tr元素
var stutr = "<tr id='stu_"+id+"'><td class='seq'>1</td><td id='username_"+id+"'>"+username+"</td><td id='stuNum_"+id+"'>"+stuNum+"</td><td id='sex_"+id+"'>"+sex+"</td><td id='description_"+id+"'>"+description+"</td><td><a href='javascript:editStu("+id+")'>修改</a> <a href='javascript:delStu("+id+");'>删除</a></td></tr>";
// step3:将tr元素追加到tbody中
$("#stuTbody").append(stuTr);
id++;
}
resetSeq();
}
if (saveType == "edit") {
if (confirm("确认要编辑记录吗？")) {
// step1:获取表单内容
var username = $("#stuFrm").find("input[name='username']").val();
var stuNum = $("#stuFrm").find("input[name='stuNum']").val();
var sex = $("#stuFrm").find("select[name='sex']").val();
var description = $("#stuFrm").find("textarea[name='description']").val();
if (username.trim().length < 2 || username.trim().length > 4) {
checkFlag = false;
}
if (!checkFlag) {
alert("表单验证失败");
return;
}
// 修改对应ID元素的值
$("#username_" + editId).html(username);
$("#stuNum_" + editId).html(stuNum);
$("#sex_" + editId).html(sex);
$("#description_" + editId).html(description);
// 将表单元素内容置空，同时保存模式变成新增
$("#stuFrm").find("input[name='username']").val("");
$("#stuFrm").find("input[name='stuNum']").val("")
$("#stuFrm").find("select[name='sex']").val("");
$("#stuFrm").find("textarea[name='description']").val("");
saveType = "add";
editId = -1;
}
}
}
// 删除学生记录
var delStu = function(id) {
if (confirm("确认要删除所选的记录吗？")){
$("#stu_"+id).remove();
resetSeq();
}
}
var editStu = function(id) {
// 取出表格中的内容
var username = $("#username_" + id).html();
var stuNum = $("#stuNum_" + id).html();
var sex = $("#sex_" + id).html();
var description = $("#description_" + id).html();
// 将内容赋值给表单对应元素
$("#stuFrm").find("input[name='username']").val(username);
$("#stuFrm").find("input[name='stuNum']").val(stuNum);
$("#stuFrm").find("select[name='sex']").val(sex);
$("#stuFrm").find("textarea[name='description']").val(description);
saveType = "edit";
editId = id;
}
$(function(){
// 页面事件的注册
$("#saveBtn").click(saveStu);
// 加载初始化学生信息
for (var i = 0; i < stus.length; i++) {
var username = stus[i].username;
var stuNum = stus[i].stuNum;
var sex = stus[i].sex;
var description = stus[i].description;
// step2:构建tr元素
var stuTr = "<tr id='stu_"+id+"'><td class='seq'>1</td><td id='username_"+id+"'>"+username+"</td><td id='stuNum_"+id+"'>"+stuNum+"</td><td id='sex_"+id+"'>"+sex+"</td><td id='description_"+id+"'>"+description+"</td><td><a href='javascript:editStu("+id+")'>修改</a> <a href='javascript:delStu("+id+");'>删除</a></td></tr>";
// step3:将tr元素追加到tbody中
$("#stuTbody").append(stuTr);
id++;
}
resetSeq();
})
</script>
</head>
<body>
<div id="head">
<h1>1807班学生基本信息</h1>
</div>
<br>
<div>
<form id="stuFrm">
<span id="s1">姓名：</span><input type="text" name="username" id="s11">
<span id="s2">学号：</span><input type="text" name="stuNum" id="s22">
<span id="s3">性别：</span>
<select name="sex" id="s33">
<option value="">请选择</option>
<option value="man">男</option>
<option value="woman">女</option>
</select>
<br>
<br>
<span id="s4">个人介绍：</span><br><textarea name="description" id="s44"></textarea>
<br>
<input type="button" id="addBtn" value="新增"> <input type="button" id="saveBtn" value="保存">
</form>
</div>
<br>
<hr>
<br>
<div>
<table id="form">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>个人介绍</th>
<th>操作</th>
</tr>
</thead>
<tbody id="stuTbody">
</tbody>
</table>
</div>
</body>
</html>美化：
* {
margin: 0px;
padding: 0px;
}
#head {
background-color: rgb(150,185,125);
width: 1280px;
height: 70px;
margin: 0 auto;
text-align: center;
line-height: 70px;
}
#form,th,td{
border-collapse: collapse;
border: 1px solid black;
width: 1280px;
height: 60px;
text-align: center;
margin: 0 auto;
}
#form th{
background-color: rgb(85,85,85);
color: white;
}
#p1 {
background-color: #E0E0E0;
margin-left: 40px;
padding: 11px 4px 10px 16px;
}
#p11 {
width: 356px;
height: 40px;
}
#p2 {
background-color: #E0E0E0;
margin-left: -9px;
padding: 11px 4px 10px 16px;
}
#p22 {
width: 356px;
height: 38px;
}
#p3 {
background-color: #E0E0E0;
margin-left: -9.8px;
padding: 11px 4px 10px 16px;
}
#p33 {
width: 356px;
height: 40px;
margin-left: -5px;
}
input,select {
position: relative;
top: -2px;
}
#p4,#addBtn {
margin-left: 46px;
}
#p44 {
margin-left: 46px;
width: 1280px;
height: 200px;
}
#addBtn {
width: 80px;
height: 40px;
margin: 20px 0 0 600px;
}
#saveBtn {
width: 80px;
height: 40px;
margin: 20px 0 0 0;
}
tr:nth-child(even) {
background: #ccc;
}