添加洗掉記錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.formDiv {
width: 300px;
border: 1px solid #000000;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function() {
// 點擊超鏈接以后，洗掉一個員工的資訊？
// 獲取超鏈接
var allA = document.getElementsByTagName("a");
// 為每個超鏈接系結一個單擊相應函式？
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function() {
/*
點擊超鏈接以后，超鏈接會跳轉界面，這個是超鏈接的默認行為
我們不希望出現默認行為，可以通過在回應函式的最后return false來取消默認行為
*/
// 獲取tr
var tr = this.parentNode.parentNode;
// 提示框
/*
confirm()用于彈出一個帶有確認和取消按鈕的提示框
需要一個字串作為引數，該字串作為提示文字顯示
如果用戶點擊確認則回傳true，如果點擊取消則回傳false
*/
var name = "確認洗掉" + tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm(name);
// 洗掉tr
if (flag) {
tr.parentNode.removeChild(tr);
}
return false;
};
}
/*
添加員工的功能
點擊addEmpButton按鈕以后，將員工資訊填入表格
*/
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function() {
// 獲取empName內容
var name = document.getElementById("empName").value;
// 獲取employeeTable表格
var employeeTable = document.getElementById("employeeTable");
// 創建tr子節點
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML = name;
tr.appendChild(td)
// employeeTable.appendChild(tr);
var email = document.getElementById("email").value;
var td1 = document.createElement("td");
td1.innerHTML = email;
tr.appendChild(td1);
var salary = document.getElementById("salary").value;
var td2 = document.createElement("td");
td2.innerHTML = salary;
tr.appendChild(td2);
// var salary=document.getElementById("salary").value;
var td3 = document.createElement("td");
// td3.innerHTML="<a href="https://www.cnblogs.com/SSPOFA/p/#">Delete</a>";
var a = document.createElement("a");
a.href = "https://www.cnblogs.com/SSPOFA/p/#";
a.innerHTML = "Delete";
a.onclick=function(){
/*
點擊超鏈接以后，超鏈接會跳轉界面，這個是超鏈接的默認行為
我們不希望出現默認行為，可以通過在回應函式的最后return false來取消默認行為
*/
// 獲取tr
var tr = this.parentNode.parentNode;
// 提示框
/*
confirm()用于彈出一個帶有確認和取消按鈕的提示框
需要一個字串作為引數，該字串作為提示文字顯示
如果用戶點擊確認則回傳true，如果點擊取消則回傳false
*/
var name = "確認洗掉" + tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm(name);
// 洗掉tr
if (flag) {
tr.parentNode.removeChild(tr);
}
return false;
}
td3.appendChild(a);
tr.appendChild(td3);
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable" border="1" cellspacing="0">
<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/SSPOFA/p/#">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="https://www.cnblogs.com/SSPOFA/p/#">Delete</a></td>
</tr>
</table>
<div >
<h4>添加新員工</h4>
<table>
<tr>
<td >name:</td>
<td >
<input type="text" name="empName" id="empName" value="" />
</td>
</tr>
<tr>
<td >email:</td>
<td ><input type="text" name="email" id="email" value="" /></td>
</tr>
<tr>
<td >salary:</td>
<td ><input type="text" name="salary" id="salary" value="" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="https://www.cnblogs.com/SSPOFA/p/abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/162724.html
標籤：JavaScript