最近在學習jQuery的時候，學習到了appendTo()和remove()函數
於是利用兩者做了一個模擬動態添加和刪除行數據的案例，以下為完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用appendTo和remove實現動態添加和刪除行數據</title>
<style type="text/css">
#employeeTable {
/*設置表格的邊框間距*/
border-spacing: 1px;
/*設置邊框元素的背景色*/
background-color: black;
/*設置元素的外邊距屬性，順序為順時針：上右下左*/
margin: 80px auto 10px auto;
}
th, td {
background-color: #ffffff;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
/*設置元素的填充屬性，順序為順時針：上右下左*/
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// 用於復用的刪除數據的函數
var deleteFun = function () {
// 在事件響應的function函數中，有一個this對象，這個this對象是當前正在響應事件的DOM對象
// 通過當前點擊的對象a標簽獲取到Table表格的tr行元素
var $trElement = $(this).parent().parent();
// 通過tr行標簽找到后代第一列td標簽的值
var name = $trElement.find("td:first").html();
if (confirm("確定刪除[" + name + "]嗎")) {
$trElement.remove();
}
}
// 添加新員工功能
$("#addEmpButton").click(function () {
var empname = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
var trObj = $(" <tr>\n" +
" <td>" + empname + "</td>\n" +
" <td>" + email + "</td>\n" +
" <td>" + salary + "</td>\n" +
" <td><a href=\"#\">Delete</a></td>\n" +
" </tr>");
// 將以上內容追加到表格中
trObj.appendTo("#employeeTable")
// 刪除新添加的數據的功能（點擊提交按鈕后執行）
// deleteFun函數后不能加括號()，否則頁面加載完直接執行該函數，導致點擊刪除按鈕沒有任何反應
trObj.find("a").click(deleteFun);
});
// 刪除現有員工功能
// deleteFun函數后不能加括號()，否則頁面加載完直接執行該函數，導致點擊刪除按鈕沒有任何反應
$("a").click(deleteFun);
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@bob.com</td>
<td>10000</td>
<td><a href="#">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新員工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
代碼運行效果：
