<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
// 删除 tr 的 响应函数
function delA(){
//点击超链接 删除 一行
// console.log(this);
// 获取当前 tr
var tr = this.parentNode.parentNode;
// 获取要删除的 员工的名字
// var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
// 删除之前 弹出提示框
/**
* confirm() 用户弹出一个带有 确认和取消按钮的提示框
* 需要一个字符串作为参数, 该字符串将会 作为提示文字 显示出来
*/
var flag = confirm("确认删除" + name + "吗?");
// 用户点击确认 再删除
if(flag){
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;
}
/**
* 添加员工
*/
myClick(‘addEmpButton‘,function(){
// 获取员工名字
var name = document.getElementById(‘empName‘).value;
// 获取email
var email = document.getElementById(‘email‘).value;
// 获取 salary
var salary = document.getElementById(‘salary‘).value;
// <tr>
// <td>Tom</td>
// <td>tom@tom.com</td>
// <td>5000</td>
// <td><a href="deleteEmp?id=001">Delete</a></td>
// </tr>
// 创建 tr
var tr = document.createElement("tr");
// 创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
// 创建一个 a 元素
var a = document.createElement("a");
// 创建文本节点
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
// 将文本添加到 td 中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
// 向 a 中添加文本
a.appendChild(delText);
// 将 a 中添加 href 属性
a.href = "javascript:;";
a.onclick = delA;
// 将 a 添加到 td 中
aTd.appendChild(a);
// 将 td 添加到 tr 中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);;
tr.appendChild(aTd);
// 获取 table
var employeeTable = document.getElementById(‘employeeTable‘);
// 获取 employeeTable 中的 tbody
var tbody = employeeTable.getElementsByTagName("tbody");
// 将 tr 添加到 tbody 中
tbody[0].appendChild(tr);
});
function myClick(doc,fun){
var el = document.getElementById(doc);
el.onclick = fun
}
}
</script>
</head>
<body>
<div >
<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="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>jerry</td>
<td>jerry@tom.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>Bob@Bob.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="forDiv">
<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>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
// 删除 tr 的 响应函数
function delA(){
//点击超链接 删除 一行
// console.log(this);
// 获取当前 tr
var tr = this.parentNode.parentNode;
// 获取要删除的 员工的名字
// var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
// 删除之前 弹出提示框
/**
* confirm() 用户弹出一个带有 确认和取消按钮的提示框
* 需要一个字符串作为参数, 该字符串将会 作为提示文字 显示出来
*/
var flag = confirm("确认删除" + name + "吗?");
// 用户点击确认 再删除
if(flag){
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;
}
/**
* 添加员工
*/
myClick(‘addEmpButton‘,function(){
// 获取员工名字
var name = document.getElementById(‘empName‘).value;
// 获取email
var email = document.getElementById(‘email‘).value;
// 获取 salary
var salary = document.getElementById(‘salary‘).value;
// <tr>
// <td>Tom</td>
// <td>tom@tom.com</td>
// <td>5000</td>
// <td><a href="deleteEmp?id=001">Delete</a></td>
// </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");
// 将 tr 添加到 tbody 中
tbody[0].appendChild(tr);
});
function myClick(doc,fun){
var el = document.getElementById(doc);
el.onclick = fun
}
}
</script>
</head>
<body>
<div >
<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="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>jerry</td>
<td>jerry@tom.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>Bob@Bob.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="forDiv">
<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>
</div>
</body>
</html>
