<!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 type="text/javascript">
/*
* 刪除tr的響應函數
*/
function delA() {
//點擊超鏈接以后需要刪除超鏈接所在的那行
//這里我們點擊那個超鏈接this就是誰
//獲取當前tr
var tr = this.parentNode.parentNode;
//獲取要刪除的員工的名字
//var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
//刪除之前彈出一個提示框
/*
* confirm()用於彈出一個帶有確認和取消按鈕的提示框
* 需要一個字符串作為參數，該字符串將會作為提示文字顯示出來
* 如果用戶點擊確認則會返回true，如果點擊取消則返回false
*/
var flag = confirm("確認刪除" + name + "嗎?");
//如果用戶點擊確認
if(flag) {
//刪除tr
tr.parentNode.removeChild(tr);
}
/*
* 點擊超鏈接以后，超鏈接會跳轉頁面，這個是超鏈接的默認行為，
* 但是此時我們不希望出現默認行為，可以通過在響應函數的最后return false來取消默認行為
*/
return false;
};
window.onload = function() {
/*
* 點擊超鏈接以后，刪除一個員工的信息
*/
//獲取所有額超鏈接
var allA = document.getElementsByTagName("a");
//為每個超鏈接都綁定一個單擊響應函數
for(var i = 0; i < allA.length; i++) {
allA[i].onclick = delA;
}
/*
* 添加員工的功能
* - 點擊按鈕以后，將員工的信息添加到表格中
*/
//為提交按鈕綁定一個單擊響應函數
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function() {
//獲取用戶添加的員工信息
//獲取員工的名字
var name = document.getElementById("empName").value;
//獲取員工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//alert(name+","+email+","+salary);
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
需要將獲取到的信息保存到tr中
*/
//創建一個tr
var tr = document.createElement("tr");
//設置tr中的內容
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
//獲取剛剛添加的a元素，並為其綁定單擊響應函數
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
//獲取table
var employeeTable = document.getElementById("employeeTable");
//獲取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//將tr添加到tbodye中，此方法會把整個tbody的數據替換掉，不推薦使用
tbody.appendChild(tr);
/*tbody.innerHTML += "<tr>"+
"<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>"
+"</tr>";*/
};
};
</script>
<script type="text/javascript">
window.onload = function(){
/*
* 點擊超鏈接以后，刪除一個員工的信息
*/
//獲取所有額超鏈接
var allA = document.getElementsByTagName("a");
//為每個超鏈接都綁定一個單擊響應函數
for(var i=0 ; i < allA.length ; i++){
/*
* for循環會在頁面加載完成之后立即執行，
* 而響應函數會在超鏈接被點擊時才執行
* 當響應函數執行時，for循環早已執行完畢
*/
alert("for循環正在執行"+i); //在頁面加載時，for 循環就依次執行了3次 i = 0,1,2,
allA[i].onclick = function(){
alert("響應函數正在執行"+i); //點擊a 標簽的時，響應函數才開始執行，此時i 已經是3 了
//alert(allA[i]);
return false;
};
}
};
</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="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td>
<a href="deleteEmp?id=002">Delete</a>
</td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</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">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
