最近在學習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=https://www.cnblogs.com/"#\">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>[email protected]</td>
<td>5000</td>
<td><a href="https://www.cnblogs.com/xiqingbo/p/#">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="https://www.cnblogs.com/xiqingbo/p/#">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="https://www.cnblogs.com/xiqingbo/p/#">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新員工</h4>
<table>
<tr>
<td >name:</td>
<td >
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td >email:</td>
<td >
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td >salary:</td>
<td >
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="https://www.cnblogs.com/xiqingbo/p/abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
代碼運行效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/254737.html
標籤：jQuery
上一篇：JavaScript-作用域