DOM的增删改实例
1.给出如下图，请利用DOM的增删改完成员工信息的删除以及添加
2.具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM删除练习</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#employeeTable{
margin:50px auto;
border-spacing:0px;
}
div{
width:298px;
margin:50px auto;
border:1px solid;
padding-left:20px;
}
h4{
padding:20px 0px;
}
div table{
padding-bottom:10px;
}
a{
text-decoration:none;
}
</style>
<script type="text/javascript">
function del()
{
//因为点击超链接以后，超链接会跳转页面，这是超链接的默认行为，所以写成此形式<a href="javascript:;">，这样可以防止页面跳转也可以在删除后面写一个return false;
//点击超链接以后需要删除超链接所在的行
//获取当前a所在的行
var tr=this.parentNode.parentNode;//这里的this表示我们所点击的那个超链接
//获取当前要删除员工的名字
var name=tr.getElementsByTagName("td")[0].innerHTML;
var flag=confirm("确认要删除"+name+"吗");//confirm有返回值，确认为true和取消为false
if(flag)//如果点击确认则删除tr
tr.parentNode.removeChild(tr);
//return false;
}
window.onload=function()
{
//1.点击超链接以后删除一个员工信息
//获取所有的超链接
var alla=document.getElementsByTagName("a");
//为每一个超链接都绑定一个单击响应事件（遍历）
for(var i=0;i<alla.length;i++)
{
alla[i].onclick=del;
}
//2.点击submit按钮后添加一个员工信息到表格中
//获取按钮
var btn=document.getElementById("addEmpButton");
//点击响应事件
btn.onclick=function()
{
//获取用户添加的员工信息（获取员工姓名）
var name=document.getElementById("empName").value;
//获取员工的邮箱
var email=document.getElementById("email").value;
//获取员工工资
var salary=document.getElementById("salary").value;
//需要将获取到的信息保存到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>";
//获取tr中的a
var a=tr.getElementsByTagName("a")[0];
//绑定单击响应函数
a.onclick=del;
//获取table
var employeeTb=document.getElementById("employeeTable");
//获取tbody
var tbody=employeeTb.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable" border="1px">
<tr>
<th>Name</th>
<th>Eamil</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>Jeery</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="javascript:;">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>
3.删除结果图
4.成功删除Tom信息
5.添加信息
6.说明：下面的这两句代码可以有另一种写法
//创建一个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>";
//获取table
var employeeTb=document.getElementById("employeeTable");
//获取tbody
var tbody=employeeTb.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.appendChild(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.appendChild(deltext);
atd.appendChild(a);
//将td放到tr中
tr.appendChild(nametd);
tr.appendChild(emailtd);
tr.appendChild(salarytd);
tr.appendChild(atd);
//获取table
var employeeTb=document.getElementById("employeeTable");
//获取tbody
var tbody=employeeTb.getElementsByTagName("tbody")[0];
//将tr添加到table中
tbody.appendChild(tr);
作用是创建表格的一行（例如下面的例子）
<tr>
<td>Jeery</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="javascript:;">delete</a></td>
</tr>