首页 > 代码库 > 添加元素节点-html
添加元素节点-html
<!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=http://www.mamicode.com/‘#‘ onclick=‘delRow(this)‘>Delete" 得到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=http://www.mamicode.com/‘#‘ onclick=‘delRow(this)‘>Delete" //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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。