使用JQuery动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin:0;
}
input {
width:100px;
height:30px;
/*cursor: pointer;*/
/*font:700 14px/30px "simsun";*/
border-radius: 5px;
}
table {
border-collapse: collapse;
margin: 10px 0;
}
table tr {
border: 1px solid #ddd;
}
table td,table th {
padding:5px;
text-align: center;
}
table th{
background-color: #8af6ff;
}
.mask-color {
background-color: rgba(0,0,0,0.4);
}
#mask{
width: 300px;
height: 250px;
box-shadow: 2px 2px 2px 2px #ccc;
position: absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -125px;
}
#mask h2 {
color: #c30230;
font-weight: 700;
background-color: #ddd;
height:20px;
line-height: 20px;
font-size: 16px;
}
#mask input {
margin: 10px 0;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="添加数据">
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>已学会</th>
</tr>
</thead>
<tbody>
<tr>
<td>JAVASCRIPT</td>
<td>前端移动开发学院</td>
<td class="get">GET</td>
</tr>
<tr>
<td>HTML5</td>
<td>前端移动开发学院</td>
<td class="get">GET</td>
</tr>
<tr>
<td>CSS3</td>
<td>前端移动开发学院</td>
<td class="get">GET</td>
</tr>
<tr>
<td>BOOTSTRAP</td>
<td>前端移动开发学院</td>
<td class="get">GET</td>
</tr>
</tbody>
</table>
</div>
<div id="mask" style="display: none">
<h2>添加数据 <span style="float: right;margin-right:10px;display: inline-block;width: 10px;height: 20px">X</span></h2>
<div>
<span>课程名称：</span> <input id="name" type="text" placeholder="请输入课程名称！" style="width: 150px;height: 30px;">
</div>
<div>
<span>所属学院：</span> <input id="school" type="text" value="JAVA学院" style="width: 150px;height: 30px;">
</div>
<div style="text-align: center">
<button style="width: 150px;height: 25px;text-align: center;line-height: 25px;border: 0;">添加</button>
</div>
</div>
</body>
<script src="jquery-1.11."></script>
<script>
$("input[type='button']").click(function(){
$("#mask").fadeIn(1000);
$("body").addClass("mask-color");
});
$("h2 span").click(function(){
$("#mask").fadeOut(1000);
$("body").removeClass("mask-color");
});
$("#mask button").click(function(){
var name = $("#name").val();
var school = $("#school").val();
if(name == "" || name == null){
alert("请输入课程名称！");
return;
}
$("#mask").fadeOut();
$("body").removeClass("mask-color");
var tr = $("<tr></tr>");
//赋值
('<td>'+name+'</td><td>'+school+'</td><td class="get">GET</td>');
//在房间tbody中
$("tbody").append(tr);
//BUG：新产生的tr没有事件绑定 坑！！
(function(){
$(this).remove();
})
$("#name").val("");
});
$(".get").click(function(){
// alert(0);
$(this).parent("tr").remove();
})
</script>
</html>