添加元素节点-html

浏览数：13 / 时间：2015年06月09日

<!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>