您的位置：首页 > 其它
08-Dom操作表格

2015-10-08 15:50 330 查看
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态创建表格</title>
</head>
<body>
<center>
<br>
<br>
添加用户：
<br>
<br>
姓名：<input type="text" name="name" id="name" />   email:<input type="text" name="email" id="email" />   电话：<input type="text" name="tel" id="tel" />
<br/>
<br>
<button id="addUser">
提交
</button>
<br/>
<br/>
<hr>
<br/>
<br/>
<table id="usertable" border="1" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<th>
姓名
</th>
<th>
email
</th>
<th>
电话
</th>
<th>
 
</th>
</tr>
<tr>
<td>
Tom
</td>
<td>
Tom@tom.com
</td>
<td>
12346
</td>
<td>
<a href="deleteEmp?id=Tom">Delete</a>
</td>
</tr>
<tr>
<td>
Jerry
</td>
<td>
Jerry@Jerry.com
</td>
<td>
12346
</td>
<td>
<a href="deleteEmp?id=Jerry">Delete</a>
</td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
window.onload = function(){
document.getElementById("addUser").onclick = function(){
//获取文本框的值
var nameValue = document.getElementById("name").value;
var emailValue = document.getElementById("email").value;
var telValue = document.getElementById("tel").value;
//创建td
//创建nametd
var nameTd = document.createElement("td");
var nameText = document.createTextNode(nameValue);
nameTd.appendChild(nameText);
//创建emailtd
var emailTd = document.createElement("td");
var emailText = document.createTextNode(emailValue);
emailTd.appendChild(emailText);
//创建teltd
var telTd = document.createElement("td");
var telText = document.createTextNode(telValue);
telTd.appendChild(telText);
//创建atd
var aTd = document.createElement("td");
var aElement = document.createElement("a");
aElement.setAttribute("href", "deleteEmp?id=" + nameValue)
var DeleteText = document.createTextNode("Delete");
aElement.appendChild(DeleteText);
aTd.appendChild(aElement);
//创建tr
var trElement = document.createElement("tr");
//增加td到tr上
trElement.appendChild(nameTd);
trElement.appendChild(emailTd);
trElement.appendChild(telTd);
trElement.appendChild(aTd);
//增加tr到table上
var tableElement=document.getElementById("usertable");
//创建tbody
var tbodyElement=document.createElement("tbody");
tbodyElement.appendChild(trElement);

tableElement.appendChild(tbodyElement);
//删除
aElement.onclick=function(){
//使网页连接失效
return delTr(aElement);
}
}

}

function delTr(aElement){
var name=aElement.parentNode.firstChild.firstChild.nodeValue;
var flag=window.confirm("您确定要删除["+name+"]这个用户吗？");
if(!flag){
return false;
}
//删除
//获取tbody
var tbodyElement=aElement.parentNode.parentNode.parentNode;
//获取tr
var trElement=aElement.parentNode.parentNode;
//删除
tbodyElement.removeChild(trElement);
return false;
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航