dom元素新增及删除

<!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>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">

window.onload = function(){javascript

// 根据分析，咱们的删除功能触发点写在了a标签中，那么咱们给全部的a标签绑定单击响应方法，而后进行删除操做css

       // 将咱们的删除响应方法提取出来，方便之后对新增的进行绑定
       function delClick(){
           // 根据网页的结构，咱们须要删除的是tr
           var tr = this.parentNode.parentNode;
// console.log(tr);
// 获取元素的第一个元素，能够用两种方式，getElementsByTagName[] ,或者使用属性 children[0] (子元素)
var name = tr.getElementsByTagName("td")[0].innerHTML;
console.log(name);
var tdname = tr.children[0].innerHTML;
// 增长咱们确认框
var flag = confirm("您确认要删除"+tdname+"吗？");
if(flag){
tr.parentNode.removeChild(tr);
}html

//超连接默认点击了就会跳转，返回false 去除默认跳转
return false;
}java

var dels = document.getElementsByTagName("a");
for(var i=0;i<dels.length;i++){
dels[i].onclick = delClick;
}app

// 给添加按钮绑定单击响应函数函数

       var addBtn = document.getElementById("addEmpButton");
       addBtn.onclick = function(){
           // 获取三个文本框对象
           var nameObj = document.getElementById("empName");
           var emailObj = document.getElementById("email");
           var salaryObj = document.getElementById("salary");ui

           // 根据要求，咱们是向表格的tbody 里面新增一行
           var tr = document.createElement("tr");
           tr.innerHTML = "<td>"+nameObj.value+"</td>"+
                       "<td>"+emailObj.value+"</td>"+
                       "<td>"+salaryObj.value+"</td>"+
                       "<td><a href='javascript:;'>Delete</a></td>";
           var a = tr.getElementsByTagName("a")[0];
           a.onclick = delClick;
           // 找到元素父元素
           var tableObj = document.getElementById("employeeTable");
           // 找到父元素下的tbody
           var tbody = tableObj.getElementsByTagName("tbody")[0];
           tbody.appendChild(tr);
       };this

};spa

</script>
</head>
<body>orm

   <table id="employeeTable">
       <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Salary</th>
           <th> </th>
       </tr>
       <tr>
           <td>Tom</td>
           <td>tom@tom.com</td>
           <td>5000</td>
           <td><a href="javascript:;">Delete</a></td>
       </tr>
       <tr>
           <td>Jerry</td>
           <td>jerry@sohu.com</td>
           <td>8000</td>
           <td><a href="deleteEmp?id=002">Delete</a></td>
       </tr>
       <tr>
           <td>Bob</td>
           <td>bob@tom.com</td>
           <td>10000</td>
           <td><a href="deleteEmp?id=003">Delete</a></td>
       </tr>
   </table>

   <div id="formDiv">

       <h4>添加新员工</h4>

       <table>
           <tr>
               <td class="word">name: </td>
               <td class="inp">
                   <input type="text" name="empName" id="empName" />
               </td>
           </tr>
           <tr>
               <td class="word">email: </td>
               <td class="inp">
                   <input type="text" name="email" id="email" />
               </td>
           </tr>
           <tr>
               <td class="word">salary: </td>
               <td class="inp">
                   <input type="text" name="salary" id="salary" />
               </td>
           </tr>
           <tr>
               <td colspan="2">
                   <button id="addEmpButton" value="abc">
                       Submit
                   </button>
               </td>
           </tr>
       </table>

</div>

</body> </html>