項目需求
- 需要一個頁面，包括一張表格，一個button(id=”button1”)
- button1點擊事件是會在頁面上方出現用來為表格添加顯示框，背景為灰色
- 顯示框中也有一個button(id=”button2),其點擊事件是將顯示框中的數據添加到頁面 的表格中
- 顯示框中需要包括一個div,其點擊事件是關閉顯示框
步驟
1. HTML結構
利用HTML創建一個四行三列表格，並為之填充數據
在table上方添加一個button
創建一個對話框，包括兩個input，一個button
2. CSS美化
為table、th、td添加外邊框，並將重疊線條變為一條
第一行背景為淡藍色
第一步和第二步截圖如下:
3. jQuery操作
具體需求，參照上圖
1. 在第一個截圖頁面中點擊addData按鈕，會出現第二個截圖頁面
```
$(".button1").click(function(){
$(".bgc").show();
$(".newData").show();
});
```
2. 截圖一中點擊GET則其所在行刪除
```
$("a").click(function(){
$(this).parent("td").parent("tr").remove();
});
```
3. 截圖二中點擊右上角小×則截圖二消失
```
$("#span2").click(function(){
$(".newData").hide();
$(".bgc").hide();
});
```
4. 截圖二中點擊“提交”按鈕，則將“課程名稱”和“所屬院校”的值添加到截圖一中表 格的下方
```
var td1=$(".center #input1").val();
var td2=$(".center #input2").val();
var tr=$("<tr></tr>");
tr.html("<td>"+td1+"</td><td>"+td2+"</td>"+"<td><a href='javascript:void(0)'>GET</a></td>");
$("tbody").append(tr);
tr.find("a").click(function(){
$(this).parent("td").parent("tr").remove();
});
```
5. 截圖二中點擊事件發生后判斷“課程名稱”的值是否為空，是則彈出警告框，停止函數執行，不是則進行點擊事件
```
if($(".center #input1").val()==="")
{
alert("輸入值不能為空");
return;
}
```
6. 截圖二中將數據提交之后，將“課程名稱”的值設置為空，且截圖二消失
```
$(".center #input1").val("");
$(".newData").hide();
$(".bgc").hide();
```
完整代碼如下
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 550px;
margin: 100px auto;
}
button{
width: 90px;
height: 30px;
}
table{
width: 500px;
border: 1px solid #ccc;
border-collapse: collapse;
}
th,td{
border: 1px solid #ccc;
height: 35px;
text-align: center;
}
th{
background-color: dodgerblue;
}
.bgc{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.5;
display:none;
}
.newData{
background-color: white;
position: absolute;
left: 50%;
top: 50%;
width: 408px;
height: 326px;
margin-left: -204px;
margin-top: -150px;
display: none;
}
.title{
width: 408px;
height: 40px;
background-color: #ccc;
}
.title span{
height: 40px;
line-height: 40px;
}
#span2{
padding-right: 10px;
float: right;
cursor: pointer;
}
.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 408px;
height: 40px;
background-color: #ccc;
text-align: center;
}
.bottom button{
margin-top: 5px;
}
.center{
height: 246px;
width: 408px;
text-align: center;
padding-top: 60px;
}
.center input{
width: 200px;
height: 30px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button1").click(function(){
$(".bgc").show();
$(".newData").show();
});
$("#span2").click(function(){
$(".newData").hide();
$(".bgc").hide();
});
$("a").click(function(){
$(this).parent("td").parent("tr").remove();
});
$("#button2").click(function(){
if($(".center #input1").val()==="")
{
alert("輸入值不能為空");
return;
}
var td1=$(".center #input1").val();
var td2=$(".center #input2").val();
var tr=$("<tr></tr>");
tr.html("<td>"+td1+"</td><td>"+td2+"</td>"+"<td><a href='javascript:void(0)'>GET</a></td>");
$("tbody").append(tr);
tr.find("a").click(function(){
$(this).parent("td").parent("tr").remove();
});
$(".center #input1").val("");
$(".newData").hide();
$(".bgc").hide();
});
});
</script>
</head>
<body>
<div class="wrap">
<button class="button1">addData</button>
<table>
<thead>
<tr>
<th>課程名稱</th>
<th>所屬院校</th>
<th>已學習</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaScript</td>
<td>前端與移動開發</td>
<td><a href="javascript:void(0)">GET</a></td>
</tr>
<tr>
<td>CSS</td>
<td>前端與移動開發</td>
<td><a href="javascript:void(0)">GET</a></td>
</tr>
<tr>
<td>HTML</td>
<td>前端與移動開發</td>
<td><a href="javascript:void(0)">GET</a></td>
</tr>
</tbody>
</table>
</div>
<div class="bgc">
</div>
<div class="newData">
<div class="title">
<span id="span1">添加標題</span>
<span id="span2">x</span>
</div>
<div class="center">
課程名稱: <input type="text" name="" id="input1" value="" placeholder="請輸入課程名稱"/>
<br /><br /><br />
所屬院校: <input type="text" name="" id="input2" value="未來學院" />
</div>
<div class="bottom">
<button id="button2">提交</button>
</div>
</div>
</body>
</html>
```