javascript--DOM

最新推荐文章于 2022-09-30 20:04:44 发布

沸羊羊一个

最新推荐文章于 2022-09-30 20:04:44 发布

阅读量705

点赞数

分类专栏： ajax+html+css+js

本文链接：https://blog.csdn.net/zhixinhuacom/article/details/17242745

版权

ajax+html+css+js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需求：添加用户到表格中，表格可以删除添加的用户

<!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>