人员信息增删

人员信息增删

效果

//CSS
*{
    margin: 0px;
    padding: 0px;
   }
   /* 添加列表样式 */
   #formDiv {
    width: 100%;
    height: 60px;
    border-bottom: #D3D3D3  solid;
    border-width: 3px;
    padding: 10px;
    margin-top: 20px;
    font-size: 18px;
   }
   .tr{
    float: left;
    margin-left: 100px;
   }
   #formDiv input {
    width: 100%;
   }
   .word {
    width: 0px;
    text-align: right;
   }
   .inp {
    width: 200px;
   }
   #addEmpButton{
    width: 100px;
   }
   /* 列表样式 */
   #Table {
    width: 500px;
    height: 80px;
    border-spacing: 3px;
    background-color: black;
    margin: 50px auto 10px auto;
   }
   th,td {
    background-color: white;
   }
   a{
    text-decoration: none;
    color: #000000;
    text-align: center;
   }

// HTML
<!-- 添加部分 -->
  <div id="formDiv">
   <table class="table">
    <tr class="tr">
     <td class="word">姓名: </td>
     <td class="inp">
      <input type="text" name="Name" id="Name" />
     </td>
    </tr>
    <tr class="tr">
     <td class="word">联系方式: </td>
     <td class="inp">
      <input type="text" name="email" id="email" />
     </td>
    </tr>
    <tr class="tr">
     <td class="word">年龄: </td>
     <td class="inp">
      <input type="text" name="age" id="age" />
     </td>
    </tr>
    <tr class="tr">
     <td colspan="2" align="center">
      <button id="addButton">
      添加
     </button>
     </td>
    </tr>
   </table>
  </div>
  <!-- 添加后 -->
  <table id="Table">
   <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>操作</th>
   </tr>
   <tr>
    <th>张三</th>
    <th>fdo@fd.com</th>
    <th>15</th>
    <th>
     <a href="deleteEmp?id=002">删除</a>
    </th>
   </tr>
  </table>

// Javascript
// 删除tr的响应函数
   function delA() {
    //点击超链接以后需要删除超链接所在的那行
    //这里我们点击那个超链接this就是谁
    //获取当前tr
    var tr = this.parentNode.parentNode;
    //获取要删除的信息的名字
    //var name = tr.children[0].innerHTML;
    //删除tr
    tr.parentNode.removeChild(tr);
   };
   window.onload = function() {
    //获取所有超链接
    var allA = document.getElementsByTagName("a");
    //为每个超链接都绑定一个单击响应函数
    for(var i = 0; i < allA.length; i++) {
     allA[i].onclick = delA;
    }
    //为提交按钮绑定一个单击响应函数
    var addButton = document.getElementById("addButton");
    addButton.onclick = function() {
     //获取用户添加的信息
     var name = document.getElementById("Name").value;
     var email = document.getElementById("email").value;
     var age = document.getElementById("age").value;
     //创建一个tr
     var tr = document.createElement("tr");
     //创建四个td
     var nameTd = document.createElement("td");
     var emailTd = document.createElement("td");
     var ageTd = document.createElement("td");
     var aTd = document.createElement("td");
     //创建一个a元素
     var a = document.createElement("a");
     //创建文本节点
     var nameText = document.createTextNode(name);
     var emailText = document.createTextNode(email);
     var ageText = document.createTextNode(age);
     var delText = document.createTextNode("删除");
     //将文本条件到td中
     nameTd.appendChild(nameText);
     emailTd.appendChild(emailText);
     ageTd.appendChild(ageText);
     //向a中添加文本
     a.appendChild(delText);
     //将a添加到td中
     aTd.appendChild(a);
     //将td添加到tr中
     tr.appendChild(nameTd);
     tr.appendChild(emailTd);
     tr.appendChild(ageTd);
     tr.appendChild(aTd);
     //向a中添加href属性
     a.href = "javascript:;";
     //为新添加的a再绑定一次单击响应函数
     a.onclick = delA;
     //获取table
     var Table = document.getElementById("Table");
     //获取Table中的tbody
     var tbody = Table.getElementsByTagName("tbody")[0];
     //将tr添加到tbodye中
     tbody.appendChild(tr);
    };
   };