您的位置：首页 > Web前端 > JavaScript

【javascript】动态管理用户

2013-12-04 18:58 260 查看 
<script type="text/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
var nameTdElement =document.createElement("td");
var nameTextElement = document.createTextNode(namevalue);
nameTdElement.appendChild(nameTextElement);

var emailTdElement =document.createElement("td");
var emailTextElement = document.createTextNode(emailvalue);
emailTdElement.appendChild(emailTextElement);

var telTdElement =document.createElement("td");
var telTextElement = document.createTextNode(telvalue);
telTdElement.appendChild(telTextElement);

var aTdElement = document.createElement("td");
var aElement = document.createElement("a");
aElement.setAttribute("href","deleteEmp?id="+namevalue);
var deleteTextElement = document.createTextNode("Delete");
aElement.appendChild(deleteTextElement);
aTdElement.appendChild(aElement);

//定义tr,将td添加到tr中
var trElement = document.createElement("tr");
trElement.appendChild(nameTdElement);
trElement.appendChild(emailTdElement);
trElement.appendChild(telTdElement);
trElement.appendChild(aTdElement);

//获取table,tbody,将tr节点添加到tbody中
var tableElement = document.getElementById("tableuser");
var tbodyElement = document.createElement("tbody"); //跨浏览器选择,table自带tbody

tbodyElement.appendChild(trElement);
tableElement.appendChild(tbodyElement);
/******************************************************/
//给aElement增加单击事件
aElement.onclick = function(){
return deleteTr(aElement);  //使网页的链接失效
}
}
}

//删除tr
function deleteTr(aElement){
//获取用户名
var  name = aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;

var flag = window.confirm("您真的要删除"+name+"这个用户么");
if(!flag){ return false ;} //不删除,点击取消 flag = false

//点击确定 flag = true ,删除行
var trElement = aElement.parentNode.parentNode;
var tableElement = aElement.parentNode.parentNode.parentNode;
tableElement.removeChild(trElement);
return false ;
}
</script>

<style type="text/css">

</style>

</head>
<body>
<center>
添加用户 <br /><br />
姓名 <input type="text" name="name" id="name" />  
e-mail <input type="text" name="email" id="email" />  
电话 <input type="text" name="tel" id="tel" /><br /><br />
<button id="adduser">提交</button><br /><br /><br />
<hr />
<br /><br />
<table id="tableuser" border="1" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th>姓名</th>
<th>e-mail</th>
<th>电话</th>
<th> </th>
</tr>
<tr>
<td>tom</td>
<td>tom@163.com</td>
<td>1235454</td>
<td><a href="deleteEmp?id=tom">Delete</a></td>
</tr>
<tr>
<td>kate</td>
<td>kate@163.com</td>
<td>432335454</td>
<td><a href="deleteEmp?id=kate">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航