1、题目
2、素材
目录结构
链接：https://pan.baidu.com/s/1X3sv4gX0V396FtK1H5f3LQ
提取码：52cp
复制这段内容后打开百度网盘手机App，操作更方便哦
3、代码
3.1题目
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<style type="text/css">
#etable{width:600px;border:solid 1px #333; border-collapse:collapse;}
(1) /*第（1）空，设置表格所有行的样式*/
{height:30px;}
th{border:solid 1px #333;}
td{border:solid 1px #333; text-align:center;}
td a{margin-right:10px; color:red}
#popdiv,#popchange{
width:500px;padding:10px;
border:solid 1px red;
(2) ;/*第（2）空，设置模态框绝对定位*/
left:26%;
top:100px;
background:#fff;
(3) ; /*第（3）空，设置模态框开始是隐藏状态*/
(4) :999;/*第（4）空，设置模态框显示在最上层*/
}
#popdiv p{border-bottom:solid 1px red}
.mask{
opacity:0.4;
background:#000;
(2) ;/*第（2）空，设置模态框绝对定位*/
left:0;top:0;
width:100%;
height:650px;
}
</style>
<!--<script src=" (5) " type="text/javascript"></script>-->
<script src=" (5) " type="text/javascript"></script>
<script>
$(function(){
(6) index=-1; /*第（6）空，定义变量并赋值*/
//点击查看
$(' (7) ').click(function(){ /* 第(7) 空*/
$('<div class="mask"></div)>').appendTo($('body'));
var arr=[];
$(this).parent().siblings().each(function() {
arr. (8) ($(this).text()); /*想数组的末尾添加数据*/ /*arr. (8) ($(this).text());*/
});
$('#popdiv').show().children().each(function(i){
$(this).children('span').text(arr[i]);
});
});
//关闭
$('.close').click(function(){
$(this).parent().hide();
$('.mask'). (9) ; /*隐藏模态框的挡板*/ /*$('.mask'). (9) ;*/
});
//删除
$('.del').click(function(){
var conf=confirm('确定要删除吗？');
if( (10) ){ /*第(10) 空*/
$(this).parents('tr'). (11) ; /*删除数据*/ /*$(this).parents('tr'). (11) ;*/
}
});
});
</script>
</head>
<body>
<table id="etable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>前端工程师</td>
<td>6000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>java工程师</td>
<td>8000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>项目经理</td>
<td>10000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
</tr>
</table>
<div id="popdiv">
<p><strong>姓名：</strong><span></span></p>
<p><strong>年龄：</strong><span></span></p>
<p><strong>职位：</strong><span></span></p>
<p><strong>工资：</strong><span></span></p>
<a href="#" class="close">关闭</a>
</div>
<div id="popchange">
<p><strong>姓名：</strong><input type="text" id="name" /></p>
<p><strong>年龄：</strong><input type="text" id="age" /></p>
<p><strong>职位：</strong><input type="text" id="zhiwei" /></p>
<p><strong>工资：</strong><input type="text" id="gongzi" /></p>
<a href="#" class="close">关闭</a>
<a href="#" class="save">保存</a>
</div>
</body>
</html>
3.3解析及代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<style type="text/css">
#etable{width:600px;border:solid 1px #333; border-collapse:collapse;}
/* 第（1）空，设置表格所有行的样式*/
#etable tr{/* 刘老师解析：下面的表格用的是id命名,所以用#id tr是对应的子元素*/
height:30px;
}
th{border:solid 1px #333;}
td{border:solid 1px #333; text-align:center;}
td a{margin-right:10px; color:red}
#popdiv,#popchange{
width:500px;padding:10px;
border:solid 1px red;
position: absolute;/*第（2）空，设置模态框绝对定位*//* 刘老师解析：常识*/
left:26%;
top:100px;
background:#fff;
display: none; /*第（3）空，设置模态框开始是隐藏状态*//* 刘老师解析：常识*/
z-index:999;/*第（4）空，设置模态框显示在最上层*/ /* 刘老师解析：常识*/
}
#popdiv p{border-bottom:solid 1px red}
.mask{
opacity:0.4;
background:#000;
position: absolute;/*第（2）空，设置模态框绝对定位*/
left:0;top:0;
width:100%;
height:650px;
}
</style>
<!--<script src=" (5) " type="text/javascript"></script>-->
<script src="./js/jquery-3.4.1.js" type="text/javascript"></script> <!--刘老师解析：注意路径位置-->
<script>
$(function(){
var index=-1; /*第（6）空，定义变量并赋值*///这个变量下面并没有使用到,所以直接加var就可以了
//点击查看
$('.view').click(function(){ /* 第(7) 空*//* 刘老师解析：类选择器*/
$('<div class="mask"></div)>').appendTo($('body'));
var arr=[];
$(this).parent().siblings().each(function() {
arr.push($(this).text()); /*想数组的末尾添加数据*/ /*arr. (8) ($(this).text());*//* 刘老师解析：数组追加内容*/
});
$('#popdiv').show().children().each(function(i){
$(this).children('span').text(arr[i]);
});
});
//关闭
$('.close').click(function(){
$(this).parent().hide();
$('.mask').hide(); /*隐藏模态框的挡板*/ /*$('.mask'). (9) ;*//* 刘老师解析：隐藏hide()*/
});
//删除
$('.del').click(function(){
var conf=confirm('确定要删除吗？');
if(conf){ /*第(10) 空*//* 刘老师解析：布尔值*/
$(this).parents('tr').remove(); /*删除数据*/ /*$(this).parents('tr'). (11) ;*//* 刘老师解析：移除html元素*/
}
});
});
</script>
</head>
<body>
<table id="etable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>工资</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>前端工程师</td>
<td>6000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>java工程师</td>
<td>8000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>项目经理</td>
<td>10000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
</tr>
</table>
<div id="popdiv">
<p><strong>姓名：</strong><span></span></p>
<p><strong>年龄：</strong><span></span></p>
<p><strong>职位：</strong><span></span></p>
<p><strong>工资：</strong><span></span></p>
<a href="#" class="close">关闭</a>
</div>
<div id="popchange">
<p><strong>姓名：</strong><input type="text" id="name" /></p>
<p><strong>年龄：</strong><input type="text" id="age" /></p>
<p><strong>职位：</strong><input type="text" id="zhiwei" /></p>
<p><strong>工资：</strong><input type="text" id="gongzi" /></p>
<a href="#" class="close">关闭</a>
<a href="#" class="save">保存</a>
</div>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/liurihui/blog/4758883