標籤：
<!DOCTYPE html><html><head><title>節點添加與刪除練習</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">div { text-align: center; background-color: #c0c0c0; width: 65%; height: 65%;}</style><script type="text/javascript"> //要求:動態向table中添加資訊，並可以刪除 window.onload = function() { /* 當點擊按鈕時，將資訊得到，並手動封裝成字串 "<tr><td>username</td><td>email</td><td>telephone</td><td><a href=‘#‘ onclick=‘delRow(this)‘>Delete</a></td></tr>" 得到id為tab的table，合適innerHTML+=上面的字串. 問題:當點擊超連結時，怎樣刪除當前行. 當超連結被點擊時，調用一個delRow方法，將this傳遞到delRow方法中. 在delRow方法中可以通過 parentNode.parentNode得到最終要刪除的tr。 在通過table調用removeChild方法將這一行刪除。 */ document.getElementById("btn").onclick=function(){ //1.得到資訊. var username=document.getElementById("username").value; var email=document.getElementById("email").value; var telephone=document.getElementById("telephone").value; //2.拼出字串. var msg="<tr><td>"+username+"</td><td>"+email+"</td><td>"+telephone+"</td><td><a href=‘#‘ onclick=‘delRow(this)‘>Delete</a></td></tr>" //3.將msg添加到table中. document.getElementById("tab").innerHTML+=msg; document.getElementById("username").value=""; document.getElementById("email").value=""; document.getElementById("telephone").value=""; } }; function delRow(t){ document.getElementById("tab").removeChild(t.parentNode.parentNode.parentNode); //t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode); }</script></head><body> <div> <br> <br> 姓名: <input type="text" id="username"> EMAIL: <input type="text" id="email"> 電話: <input type="text" id="telephone"> <br> <br> <input type="button" value="添加" id="btn"> <hr> <table id="tab" border=‘1‘ align="center" width="85%"> <tr> <th>姓名</th> <th>EMAIL</th> <th>電話</th> <th>操作</th> </tr> </table> </div></body></html>
添加元素節點-html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
