document 例子

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript">

        window.onload=function(){

        document.getElementById("btn_ID").onclick=function(){

/*            alert("213");*/

            //获取文本框的值

            var nameValue=document.getElementById("userid").value;

            var EValue=document.getElementById("EID").value;

            var PhoneValue=document.getElementById("PhoenID").value;

           // alert(EValue);

            //获取td

            var nameTD=document.createElement("td");

            var nameText=document.createTextNode(nameValue);

            nameTD.appendChild(nameText);

            var ETD=document.createElement("td");

            var EText=document.createTextNode(EValue);

            ETD.appendChild(EText);

            var PhoneTD=document.createElement("td");

            var PhoneText=document.createTextNode(PhoneValue);

            PhoneTD.appendChild(PhoneText);

            var DelTD=document.createElement("td");

            var aElement=document.createElement("a");

            aElement.setAttribute("href","deleteEmp?id="+nameValue);

            var DelText=document.createTextNode("删除");

            aElement.appendChild(DelText);

            DelTD.appendChild(aElement);

            //增加tr 把td增加到tr上

            var tr=document.createElement("tr");

            tr.appendChild(nameTD);

            tr.appendChild(ETD);

            tr.appendChild(PhoneTD);

            tr.appendChild(DelTD);

            //吧tr增加到table上

            var tableElement=document.getElementById("tableExample");

            tableElement.appendChild(tr);

            //删除

            aElement.onclick=function(){

                //使网页链接失效

                return DelTr(aElement);

            }

            function DelTr(a){

                var name= a.parentNode.parentNode.firstChild.firstChild.nodeValue;

                //alert(name);

                var flag=window.confirm("你真的要删除"+name+"这行么?");

                if(!flag){

                    return false;

                }

                //获取tr的parent

                var TrParent=aElement.parentNode.parentNode.parentNode;

                //获取tr

                var Tr=aElement.parentNode.parentNode;

                //删除

                TrParent.removeChild(tr);

                //网页链接失效

                return false;

            }

        }

        }

    </script>

</head>

<body>

添加用户:<br/>

用户名:<input type="text" name="user"id="userid"/>

Email:<input type="text" name="Ename" id="EID"value="qinxia@so.com"/>

电话:<input type="text" name="Phonename" id="PhoenID"/><br/>

<input type="button"value="提交"id="btn_ID"/>

<table border="1" id="tableExample">

    <tr><td>用户名</td><td>Email</td><td>电话</td><td>删除</td></tr>

</table>

</body>

</html>
相关文章
