<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dtTable.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//dom结构绘制完毕,页面的所有关联的文件必须加载完毕（图片）
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;
/*************************************************************************/
//创建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","index.html?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到tbody上
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.parentNode.firstChild.firstChild.nodeValue;
//alert(name)
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>
</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">
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>操作</th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>100000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
</table>
</center>
</body>
</html>
html中动态创建表格