HTML用户管理页面示例-优快云博客

本文链接：https://blog.youkuaiyun.com/yuhan20081021/article/details/8766056

本文介绍了一个简单的HTML用户管理页面实现案例，包括用户信息的添加及显示，并通过JavaScript实现了表单提交后的动态表格更新与删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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()函数中的内容
window.onload=function(){
  document.getElementById("addUser").onclick=function(){
/********************************************************************************************************/
//获取文本框的值
/*
* 姓名: <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
   var nametd=document.createElement("td");
   var nameText=document.createTextNode(nameValue);
   nametd.appendChild(nameText);
   //创建emailtd
   var emailtd=document.createElement("td");
   var emailText=document.createTextNode(emailValue);
   emailtd.appendChild(emailText);
   //创建电话td
   var teltd=document.createElement("td");
   var telText=document.createTextNode(telValue);
   teltd.appendChild(telText);
   //创建超链接td
   var atd=document.createElement("td");
   var aElement=document.createElement("a");
   aElement.setAttribute("href","deleteEmp?id="+nameValue);
   var deleteText=document.createTextNode("Delete");
   aElement.appendChild(deleteText);
   atd.appendChild(aElement);

   //创建tr
   var trElement=document.createElement("tr");
   trElement.appendChild(nametd);
   trElement.appendChild(emailtd);
   trElement.appendChild(teltd);
   trElement.appendChild(atd);
//插入表格里<table id="usertable"> //获取table
   var tableElement=document.getElementById("usertable");

//增加tbody到table上
   tableElement.appendChild(trElement);
   //删除:
//注册链接的onClick事件
   aElement.onclick=function(){

//使链接失效
      return delTr(aElement);
   }

  }
    }

/**
* 删除tr
* @param {Object} aElement
*/
    function delTr(aElement)
    {
   /*
     <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a href="deleteEmp?id=Tom">Delete</a></td>
     </tr>
   */
    //获取用户姓名
    var name=aElement.parentNode.parentNode.childNodes[0].childNodes[0].nodeValue;
    var flag=window.confirm("是不是要删除["+name+"]用户");
    if(!flag){ //点击 "取消"
        return false; //不删除
    }
    //删除
    //获取tr
    var trElement=aElement.parentNode.parentNode;
    //获取tr的父元素
    var trParentElement=aElement.parentNode.parentNode.parentNode;