强大的JS，增加删除表格数据。
来源：互联网 发布：阿历克斯梅森 知乎 编辑：程序博客网 时间：2024/05/16 13:02
<!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;}//删除//获取链接所在的trvar trELement=aElement.parentNode.parentNode;//获取tbodyvar tbodyELement=aElement.parentNode.parentNode.parentNode;//删除tbodyELement.removeChild(trELement);//使超链接失效return false;}</script></html>
