您的位置：首页 > Web前端 > JavaScript
强大的JS，增加删除表格数据。

2012-08-13 20:55 363 查看
<!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>
<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>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>

</table>
</center>
</body>
<script language="JavaScript">
//当文档加载完毕才能调用该函数的内容
window.onload=function(){
document.getElementById("addUser").onclick = function(){

/*********************************************************************************************************/
//获取用户信息(姓名,email,电话)
/*
* 添加用户:<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>
*/
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>
*/
//<td></td>
var nameTdElement=document.createElement("td");
//Tom
var textNameELement=document.createTextNode(nameValue);
//<td>Tom</td>
nameTdElement.appendChild(textNameELement);
window.alert(nameTdElement.firstChild.nodeValue);
//#################################################################

var emailTdElement=document.createElement("td");
var textEmailELement=document.createTextNode(emailValue);
emailTdElement.appendChild(textEmailELement);
//#################################################################

var telTdElement=document.createElement("td");
var textTelELement=document.createTextNode(telValue);
telTdElement.appendChild(textTelELement);
//#################################################################

//<td><a href="deleteEmp?id=Tom">Delete</a></td>
var aElement=document.createElement("a");
aElement.setAttribute("href","deleteEmp?id="+nameValue);
var deleteElement=document.createTextNode("Delete");
aElement.appendChild(deleteElement);

var aTdElement=document.createElement("td");
aTdElement.appendChild(aElement);

//#################################################################
/*********************************************************************************************************/
//创建tr
var trElement=document.createElement("tr");
/*********************************************************************************************************/
//增加td到tr上
trElement.appendChild(nameTdElement);
trElement.appendChild(emailTdElement);
trElement.appendChild(telTdElement);
trElement.appendChild(aTdElement);

/*********************************************************************************************************/
//创建tbody
var tbodyElement=document.createElement("tbody");

/*********************************************************************************************************/
//增加tr到tbody上
tbodyElement.appendChild(trElement);
/*********************************************************************************************************/
//增加tbody到table上
var tabElement=document.getElementById("usertable");
tabElement.appendChild(tbodyElement);

/*********************************************************************************************************/
//给超链接增加单击事件

aElement.onclick=function(){
//使超链接失效
return deleteTr(aElement);
}

/*********************************************************************************************************/
}
}

/**
* 删除tr
*
* @param {Object} aElement
*/
function deleteTr(aElement){
/*
* <tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
*/
var nameValue=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert("nameValue  "+nameValue)
var flag=window.confirm("您真的要删除["+nameValue+"]用户名吗");
//alert(flag);

//点击"取消" 不删除
if(!flag){
//使超链接失效
return false;
}

//删除
//获取链接所在的tr
var trELement=aElement.parentNode.parentNode;

//获取tbody
var tbodyELement=aElement.parentNode.parentNode.parentNode;

//删除
tbodyELement.removeChild(trELement);

//使超链接失效
return false;
}

</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航