<!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>
</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>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
//dom结构绘制完毕,页面的所有关联的文件必须加载完毕(图片)
window.οnlοad=function(){
//<button id="addUser">提交</button>
document.getElementById("addUser").οnclick=function(){
/******************************************************************************************************/
//获取文本框的值
/*
* 姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
*/
var nameValue=document.getElementById("name").value;
var emailValue=document.getElementById("email").value;
var telValue=document.getElementById("tel").value;
/******************************************************************************************************/
//创建td
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
*/
//创建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上
//<table id="usertable" border="1" cellpadding="5" cellspacing=0>
//<tbody>
var tableElement=document.getElementById("usertable");
//创建tbody,为了跨浏览器,要创建tbody
var tbodyElement=document.createElement("tbody");
tbodyElement.appendChild(trElement);
//放置tbody到table上
tableElement.appendChild(tbodyElement);
/******************************************************************************************************/
//删除
aElement.οnclick=function(){
//使网页的链接失效
return delTr(aElement);
}
/******************************************************************************************************/
}
}
/**
* @param {Object} aElement
*/
function delTr(aElement){
/*
* <tr>
<td>
Tom
</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
*/
var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert("name "+name)
var flag=window.confirm("您真的要删除["+name+"]这个用户吗?");
//alert(flag);
// 点击"取消" 按钮
if(!flag){
//使网页的链接失效
return false;
}
//删除
//获取tbody
var tbodyElement=aElement.parentNode.parentNode.parentNode;
//获取tr
var trElement=aElement.parentNode.parentNode;
//删除
tbodyElement.removeChild(trElement);
//使网页的链接失效
return false;
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
