这是一个HTML和JavaScript实现的示例，展示了如何动态添加表格数据并使用遮罩层。当点击'添加数据'按钮时，显示添加面板和遮罩层；在添加面板中输入课程名称和所属学院后，点击添加按钮，新数据将被添加到表格中；点击表格中的'delete'链接，对应的行会被删除；点击添加面板的关闭按钮或添加后，添加面板和遮罩层会消失。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item>.lb {
position: absolute;
left: 0;
top:
最低0.47元/天 解锁文章
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
