<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加刪除記錄練習</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script>
/*
* 通用方法，刪除
*/
function adeleteALL(){
//再帶點擊事件中刪除對應的tr
//獲取tr
var tr = this.parentNode.parentNode;
//動態獲取每個tr中的名字
var name = tr.getElementsByTagName("td")[0].innerHTML;
//彈出確認刪除消息框
var bool = confirm("確認刪除"+name+"嗎？");
if(bool){
//刪除tr
tr.parentNode.removeChild(tr);
}
//此時添加完點擊事件後，點擊後因爲是超鏈接，所以頁面跳轉，所以 在響應函數結束時，返回false
//return false;取消默認行爲
return false;
}
window.onload = function(){
/*
* 點擊超鏈接後，刪除員工的信息。
*
*/
//獲取所有的超鏈接
var allA = document.getElementsByTagName("a");
//給所有的超鏈接添加點擊事件
for(var i = 0;i <allA.length;i++){
allA[i].onclick = adeleteALL;
}
/*
* 向表中添加一個用戶
*
*/
//1.獲取提交按鈕
var submitBtn = document.getElementById("addEmpButton");
//2.添加點擊事件
submitBtn.onclick = function(){
//3.獲取Name，Email，Salary
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//4.創建一個tr
var tr = document.createElement("tr");
/*//5.創建4個td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
var a = document.createElement("a");
//6.創建4個文本節點
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var aText = document.createTextNode("Delete");
//7.將文本節點添加到td節點
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(aText);
aTd.appendChild(a);
//8.在tr 中添加四個td
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//11.給a標籤添加href
a.href = "javascript:;";*/
//另一種方式
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+ name +"</td>"+
"<td>"+ email +"</td>"+
"<td>"+ salary +"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
var a = tr.getElementsByTagName("a")[0];
a.onclick = adeleteALL;
//10.獲取表格，加入tr
var table = document.getElementById("employeeTable");
//12.原來的tr都是添加到tbody中的爲了避免引用樣式的出現錯誤，我們添加的tr也因該在tbody中
var tbody = table.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
//13.此時後面添加進來的員工是無法刪除的。原因：開始的刪除方法只對原有的對象有用。
}
}
</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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">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>
js--打卡--12.25 DOM添加刪除記錄練習
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章