javascript实现动态添加内容与删除内容

<script language="JavaScript">    
    function tianjia(){
    //var inputNode = document.getElementById("guo");
    //alert(inputNode.value);
    //alert(inputNode.type);
    //获取文本框中的值。
    var xmValue = document.getElementById("xm").value;
    var emValue = document.getElementById("em").value;
    var phValue = document.getElementById("ph").value;
    //alert(xmValue);
    //把文本框的值添加到td中。
         //1.姓名td-----------------------------------------------------------------
            var xmtdNode = document.createElement("td");
            var xmTextNode = document.createTextNode(xmValue);
            xmtdNode.appendChild(xmTextNode);
        //2.email  td---------------------------------------------------------------
            var emtdNode = document.createElement("td");
            var emTextNode = document.createTextNode(emValue);
            emtdNode.appendChild(emTextNode);
        //3.phone  td---------------------------------------------------------------
            var phtdNode = document.createElement("td");
            var phTextNode = document.createTextNode(phValue);
            phtdNode.appendChild(phTextNode);
        //4.删除  td <td><a href ="deteleEmp?id=name">删除</a></td>
            var deleteTdNode = document.createElement("td")
            var aNode = document.createElement("a");
            aNode.setAttribute("href","deteleEmp?id="+xmValue);
            var aTextNode = document.createTextNode("删除")
            aNode.appendChild(aTextNode);
            deleteTdNode.appendChild(aNode);
            
    //把td节点添加到tr中。
            var trNode = document.createElement("tr");
            trNode.appendChild(xmtdNode);
            trNode.appendChild(emtdNode);
            trNode.appendChild(phtdNode);
            trNode.appendChild(deleteTdNode);
    //获取table,把tr增加到table中。
            var tabNode = document.getElementById("tid");
            //创建tbody
            var tbodyNode = document.createElement("tbody")
            //var tbodyNode = tabNode.firstChild;
            tbodyNode.appendChild(trNode);
            tabNode.appendChild(tbodyNode);
            
         //增加删除事件----------------------------------------------------------     
         aNode.onclick = function(){
              // return 使超链接失效
             return  deleteTr(aNode);
         }
    }    
    function  deleteTr(aNode){
        // 获取用户姓名。
        var name = aNode.parentNode.parentNode.firstChild.firstChild.nodeValue;
        //alert("name"+name);
        //弹窗确定要删除name 用户吗?
        var flag = window.confirm("您确定要删除"+name+"用户吗?");
        //取消删除时返回 flag= false; return false 使超链接失效
        if(!flag){
            return false;
        }
        //获取要删除的tr行。
         var trNode = aNode.parentNode.parentNode;
        
        //找到tbody
         var tbody = trNode.parentNode;
        
        //进行删除tr
        tbody.removeChild(trNode);
        //return false 使超链接失效
        return false;    
    }    
    </script>
    <style type="text/css">
      table {
                 border:#ff5500 1px solid;
            }
    table td {
                 border:#00ff55 1px solid;
             }
    
              
    </style>
  </head>
  <body>
    姓名:<input type="text" name="xingming"  id="xm"/><br/>
    邮箱:<input type="text" name="email"  id="em"/><br/>
    电话:<input type="text" name="phone"  id="ph"/><br/>
    
    <button οnclick="tianjia()">登录</button>
    <table id="tid">
    <tr>
    <td>姓名</td>
    <td>email</td>
    <td>phone</td>
    <td>删除</td>
    </tr>
    </table>
  </body>
</html>
展开阅读全文

没有更多推荐了,返回首页