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>