案例：在表格中進行新增一行與刪除一行
阿新 • • 發佈：2017-07-16
ren 鏈接 默認 mage button 進行 cli ytd 超級鏈接
/* */</td>1.情況
2.思路
/*
* 為 #employeetable 的所有的 a 節點添加 Onclick 響應函數:
* 1. 彈出確認對話框: 確定要刪除 xx 的信息嗎? xx 為當前 a 節點所在的 td 所在的 tr 的
* 第一個 td 子節點的文本值, 且要去除前後空格.
* 2. 若點擊 "確認" , 則刪除 a 節點的所在的 行
*
* 註意:
* 1. a 節點是一個超級鏈接, 可以在其 onclick 事件中通過返回 false, 來取消默認行為
* 2. tr 的直接父節點為 tbody, 而不是 table
* 3. 可以把去除前後空格的代碼寫成一個 trim(str) 函數.
*
* 為 #addEmpButton 添加 onclick 響應函數:
* 1. 獲取 #name, #email, #salary 的文本框的值
* 2. 利用 1 獲取的文本值創建 3 個 td 節點, 在創建一個 tr 節點. 並把以上的 3 個 td
* 節點價位 tr 節點的子節點
<tr>
<td>Tom</td>
<td>[email protected]
<td>5000</td>
</tr>
* 3. 在創建一個 td 節點: <td><a href="deleteEmp?id=xxx">Delete</a></td>
* 4. 把 3 創建的 td 也加為 tr 的子節點.
* 5. 再把 tr 加為 #employeetable 的 tbody 子節點的子節點.
* 6. 為新創建的 tr 的 a 子節點添加 Onclick 響應函數, 使其也具備刪除的功能.
*
*/
3.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //刪除節點 9 var aNodes = document.getElementById("employeetable") 10 .getElementsByTagName("a"); 11 for(var i = 0; i < aNodes.length; i++){ 12 aNodes[i].onclick = function(){ 13 removeTr(this); 14 return false; 15 } 16 } 17 //新增節點 18 document.getElementById("addEmpButton").onclick = function(){ 19 var nameVal = document.getElementById("name").value; 20 var emailVal = document.getElementById("email").value; 21 var salaryVal = document.getElementById("salary").value; 22 23 var nameTd = document.createElement("td"); 24 nameTd.appendChild(document.createTextNode(nameVal)); 25 var emailTd = document.createElement("td"); 26 emailTd.appendChild(document.createTextNode(emailVal)); 27 var salaryTd = document.createElement("td"); 28 salaryTd.appendChild(document.createTextNode(salaryVal)); 29 30 var tr = document.createElement("tr"); 31 tr.appendChild(nameTd); 32 tr.appendChild(emailTd); 33 tr.appendChild(salaryTd); 34 35 //<td><a href="deleteEmp?id=xxx">Delete</a></td> 36 var aNode = document.createElement("a"); 37 aNode.href = "deleteEmp?id=xxx"; 38 aNode.appendChild(document.createTextNode("Delete")); 39 var aTd = document.createElement("td"); 40 aTd.appendChild(aNode); 41 tr.appendChild(aTd); 42 43 aNode.onclick = function(){ 44 removeTr(this); 45 return false; 46 } 47 48 document.getElementById("employeetable") 49 .getElementsByTagName("tbody")[0] 50 .appendChild(tr); 51 } 52 } 53 //刪除函數 54 function removeTr(aNoe){ 55 var trNode = aNoe.parentNode.parentNode; 56 var textContent = trNode.getElementsByTagName("td")[0] 57 .firstChild.nodeValue; 58 textContent = trim(textContent); 59 var flag = confirm("確定要刪除" + textContent + "的信息嗎?"); 60 if(flag){ 61 trNode.parentNode.removeChild(trNode); 62 } 63 return false; 64 } 65 //去空格函數 66 function trim(str){ 67 var reg = /^\s*|\s*$/g; 68 return str.replace(reg, ""); 69 } 70 </script> 71 </head> 72 <body> 73 <center><br><br> 74 添加新員工 <br><br> 75 name: <input type="text" name="name" id="name" /> 76 email: <input type="text" name="email" id="email" /> 77 salary: <input type="text" name="salary" id="salary" /> <br> <br> 78 79 <button id="addEmpButton">Submit</button><br><br><hr><br><br> 80 81 <table id="employeetable" border="1" cellpadding="5" cellspacing=0> 82 <tbody> 83 <tr> 84 <th>Name</th> 85 <th>Email</th> 86 <th>Salary</th> 87 <th> </th> 88 </tr> 89 <tr> 90 <td>Tom</td> 91 <td>[email protected]</td> 92 <td>5000</td> 93 <td><a href="deleteEmp?id=001">Delete</a></td> 94 </tr> 95 <tr> 96 <td> 97 Jerry 98 </td> 99 <td>[email protected]</td> 100 <td>8000</td> 101 <td><a href="deleteEmp?id=002">Delete</a></td> 102 </tr> 103 </tbody> 104 </table> 105 </center> 106 </body> 107 </html>
4.運行結果
新增一行
刪除一行
案例：在表格中進行新增一行與刪除一行