先来看一下效果：
代码部分：
html:
<body>
<div id="mask"></div>
<div id="wrap">
<div><input type="button" value="添加数据" id="btnAdd"></div>
<table>
<thead>
<tr><th>课程名称</th><th>所属学院</th><th>已学会</th></tr>
</thead>
<tbody id="tbody">
<tr>
<td>javascript</td>
<td>计算机科学与技术学院</td>
<td><a href="javascript:;" class="get">get</a></td>
</tr>
<tr>
<td>javascript</td>
<td>计算机科学与技术学院</td>
<td><a href="javascript:;" class="get">get</a></td>
</tr>
<tr>
<td>javascript</td>
<td>计算机科学与技术学院</td>
<td><a href="javascript:;" class="get">get</a></td>
</tr>
</tbody>
</table>
</div>
<div id="formAdd">
<div class="top">
<span>添加数据</span>
<input type="button" id="close" value="x">
</div>
<div class="form-item">
<!-- for属性表示与哪个表单元素绑定 -->
<label class="lb" for="lessonName">课程名称：</label>
<input class="txt" type="text" id="lessonName" placeholder="请输入课程名称">
</div>
<div class="form-item">
<label class="lb" for="school">所属学院：</label>
<input class="txt" type="text" id="school" placeholder="请输入学院名称">
</div>
<div class="form-submit">
<input type="button" value="添加" id="formbtnAdd">
</div>
</div>
</body>
css
<style>
* {
margin: 0;
padding: 0;
}
body {
}
#wrap {
width: 400px;
margin: 100px auto;
}
#btnAdd {
width: 80px;
height: 30px;
background: orange;
color:#fff;
border:1px solid orange;
opacity: 0.8;
}
table {
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 400px;
text-align: center;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "΢ÈíÑźÚ";
color: #fff;
}
td {
font: 14px "΢ÈíÑźÚ";
}
.get {
text-decoration: none;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
#formAdd {
position: absolute;
top:40%;
left: 50%;
transform:translateY(-50%) translateX(-50%);
width: 500px;
height: 290px;
background: #f0f0f0;
z-index: 99999999999;
display: none;
}
.top {
width: 500px;
height: 40px;
background: #ccc;
margin-bottom: 40px;
}
.top span {
font-size: 18px;
line-height: 40px;
margin-left: 10px;
}
#close {
width: 40px;
height: 40px;
font-size: 30px;
font-family: Arial;
border:0;
float: right;
background: #ccc;
color:#000;
}
.form-item {
position: relative;
/*height: 100%;*/
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item>.lb {
position: absolute;
left: 10px;
top:0;
width: 100px;
font-size:18px;
}
.form-item > .txt {
width: 300px;
height: 30px;
margin-left:20px;
outline: none;
}
#formbtnAdd {
position: absolute;
left: 50%;
transform:translateX(-50%);
width: 100px;
height: 30px;
background: ;
color:#000;
opacity: 0.8;
}
#mask {
width: 100%;
height: 100%;
background: #ccc;
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
background: #000000;
opacity: 0.3;
display: none;
}
</style>
jQuery
<script src="jquery-1.12.2.js"></script>
<script>
//点击btnAdd 让#formAdd，#mask显示
$(function(){
$("#btnAdd").click(function(){
$("#formAdd").show();
$("#mask").show();
});
//点击close 隐藏
$("#close").click(function(){
$("#formAdd").hide();
$("#mask").hide();
});
//点击formbtnAdd 创建一行并添加到tbody中->需要获取两个input的值lessonName,school 并让他们隐藏
$("#formbtnAdd").click(function(){
var name = $("#lessonName").val();
var school = $("#school").val();
$(("<tr><td>" + name + "</td> <td>" + school +"</td> <td><a href='javascript:;' class='get'>get</a></td> </tr>")).appendTo($("#tbody"));
$("#formAdd").hide();
$("#mask").hide();
});
//点击get删除当前行
/*$(".get").click(function(){
//这样写新添加的课程不会删除
$(this).parent().parent().remove();
})*/
$("#tbody").on("click",".get",function(){
$(this).parent().parent().remove();
})
});
</script>
全部代码->便于复制粘贴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
}
#wrap {
width: 400px;
margin: 100px auto;
}
#btnAdd {
width: 80px;
height: 30px;
background: orange;
color:#fff;
border:1px solid orange;
opacity: 0.8;
}
table {
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 400px;
text-align: center;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "΢ÈíÑźÚ";
color: #fff;
}
td {
font: 14px "΢ÈíÑźÚ";
}
.get {
text-decoration: none;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
#formAdd {
position: absolute;
top:40%;
left: 50%;
transform:translateY(-50%) translateX(-50%);
width: 500px;
height: 290px;
background: #f0f0f0;
z-index: 99999999999;
display: none;
}
.top {
width: 500px;
height: 40px;
background: #ccc;
margin-bottom: 40px;
}
.top span {
font-size: 18px;
line-height: 40px;
margin-left: 10px;
}
#close {
width: 40px;
height: 40px;
font-size: 30px;
font-family: Arial;
border:0;
float: right;
background: #ccc;
color:#000;
}
.form-item {
position: relative;
/*height: 100%;*/
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item>.lb {
position: absolute;
left: 10px;
top:0;
width: 100px;
font-size:18px;
}
.form-item > .txt {
width: 300px;
height: 30px;
margin-left:20px;
outline: none;
}
#formbtnAdd {
position: absolute;
left: 50%;
transform:translateX(-50%);
width: 100px;
height: 30px;
background: ;
color:#000;
opacity: 0.8;
}
#mask {
width: 100%;
height: 100%;
background: #ccc;
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
background: #000000;
opacity: 0.3;
display: none;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
//点击btnAdd 让#formAdd，#mask显示
$(function(){
$("#btnAdd").click(function(){
$("#formAdd").show();
$("#mask").show();
});
//点击close 隐藏
$("#close").click(function(){
$("#formAdd").hide();
$("#mask").hide();
});
//点击formbtnAdd 创建一行并添加到tbody中->需要获取两个input的值lessonName,school 并让他们隐藏
$("#formbtnAdd").click(function(){
var name = $("#lessonName").val();
var school = $("#school").val();
$(("<tr><td>" + name + "</td> <td>" + school +"</td> <td><a href='javascript:;' class='get'>get</a></td> </tr>")).appendTo($("#tbody"));
$("#formAdd").hide();
$("#mask").hide();
});
//点击get删除当前行
$("#tbody").on("click",".get",function(){
$(this).parent().parent().remove();
})
});
</script>
</head>
<body>
<div id="mask"></div>
<div id="wrap">
<div><input type="button" value="添加数据" id="btnAdd"></div>
<table>
<thead>
<tr><th>课程名称</th><th>所属学院</th><th>已学会</th></tr>
</thead>
<tbody id="tbody">
<tr>
<td>javascript</td>
<td>计算机科学与技术学院</td>
<td><a href="javascript:;" class="get">get</a></td>
</tr>
<tr>
<td>javascript</td>
<td>计算机科学与技术学院</td>
<td><a href="javascript:;" class="get">get</a></td>
</tr>
<tr>
<td>javascript</td>
<td>计算机科学与技术学院</td>
<td><a href="javascript:;" class="get">get</a></td>
</tr>
</tbody>
</table>
</div>
<div id="formAdd">
<div class="top">
<span>添加数据</span>
<input type="button" id="close" value="x">
</div>
<div class="form-item">
<!-- for属性表示与哪个表单元素绑定 -->
<label class="lb" for="lessonName">课程名称：</label>
<input class="txt" type="text" id="lessonName" placeholder="请输入课程名称">
</div>
<div class="form-item">
<label class="lb" for="school">所属学院：</label>
<input class="txt" type="text" id="school" placeholder="请输入学院名称">
</div>
<div class="form-submit">
<input type="button" value="添加" id="formbtnAdd">
</div>
</div>
</body>
</html>
总结
一.思路
1.页面需要让添加课程的表单和遮盖层先隐藏。
2.当点击添加课程按钮时让表单和遮盖层显示。
3.当点击表单的x让表单和遮盖层先隐藏。
4.点击表单添加课程按钮，创建一行并添加到tbody中->这个过程需要获取两个input的值（lessonName,school） 并让遮盖层和表单隐藏。
5.当点击get时让点击的课程当前行删除。
二.代码编辑总结
1.本案例要点为绑定事件，本案例用on()绑定事件。
2.绑定事件的三种方法bind(),delegate(),on()推荐使用on()。
3.on()方法的参数：on(“事件的名称”，“触发的对象”，事件函数)；
4.注意：需要用绑定事件的方法来做最后的get点击：
若写成：
/*$(".get").click(function(){
//这样写新添加的课程不会删除
$(this).parent().parent().remove();
})*/
效果演示：