javascript--DOM

来源：互联网发布：淘宝美工网上兼职招聘编辑：程序博客网时间：2024/04/30 22:05
需求：添加用户到表格中，表格可以删除添加的用户
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head> <body><center>    <h3> 添加用户</h3>    <br />    用户名：<input id="name" type="text"/>        E-mail：<input id="e_mail" type="text"/>       电话：<input id="phone" type="text"/>       <br />   <br />    <button id="addUser">添加</button>    <hr />    <table width="200" border="1" id="mytable">  <tr>    <td>用户名</td>    <td>E-mail</td>    <td>电话</td>    <td> </td>  </tr>  <tr>    <td>Tomddd</td>    <td>tomcom.com</td>    <td>12345467</td>    <td><a href="deleteEmp?id=Tom">delete</a></td>  </tr>  <tr>    <td>Jemes</td>    <td>3423432@.qq.com</td>    <td>2334567</td>     <td><a href="deleteEmp?id=Tom">delete</a></td>  </tr></table></center></body><script type="text/javascript">   window.onload =function(){ //打开时加载页面，页面没加载完成不可以操作一下步骤       document.getElementById("addUser").onclick = function(){                      /*1.获取相应的值*/           var name = document.getElementById("name").value;           var e_mail = document.getElementById("e_mail").value;           var phone = document.getElementById("phone").value;                      /*添加节点*/           /* <td>xxx</td>*/           var tdName=document.createElement("td");           var textName = document.createTextNode(name);           tdName.appendChild(textName);                      var tdEmail = document.createElement("td");           var textEmail = document.createTextNode(e_mail);           tdEmail.appendChild(textEmail);                      var tdPhone = document.createElement("td");           var textPhone = document.createTextNode(phone);           tdPhone.appendChild(textPhone);                      /*<td><a href="deleteEmp?id=Tom">delete</a></td>*/           var tdDelete = document.createElement("td");           var a = document.createElement("a");           a.setAttribute("href","deleteEmp?id="+name)           var textDelete = document.createTextNode("delete");           a.appendChild(textDelete);           tdDelete.appendChild(a);                      /*添加tr*/           var tr = document.createElement("tr");           tr.appendChild(tdName);           tr.appendChild(tdEmail);           tr.appendChild(tdPhone);           tr.appendChild(tdDelete);                                 /*把tr添加到table*/           var table = document.getElementById("mytable");           table.appendChild(tr);                      /*添加后把输入框至空*/           document.getElementById("name").value="";           document.getElementById("e_mail").value="";           document.getElementById("phone").value="";                      /*点击删除事件*/           a.onclick =function(){               return deleteTr(a);           }                  }                 }          function deleteTr(a){           //获取用户名           var username = a.parentNode.parentNode.firstChild.firstChild.nodeValue;           var flag=window.confirm("确定要删除"+username+"用户？");           if(!flag){               return false;           }                      if(flag){           var table = document.getElementById("mytable");           var remove = a.parentNode.parentNode;           table.removeChild(remove);           return false;           }       }</script></html>
0 0