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

document 例子的更多相关文章

  1. MongoDB (八) MongoDB 文档操作

    一. MongoDB 插入文档 insert() 方法 要插入数据到 MongoDB 集合,需要使用 MongoDB 的  insert() 或 save() 方法. 语法 insert() 命令的基 ...

  2. trigger()的event事件对象之坑

    问题引入,先贴一段有问题的代码,如果你对 trigger()  这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...

  3. js鼠标右键操作

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...

  4. MongoDB 基础命令——数据库表的增删改查——遍历操作表中的记录

    分组排序查询最大记录 //对 "catagory" 不等于 null 的数据进行分组查询,且查询结果倒序 db.getCollection('userAccount').aggre ...

  5. MongoDB快速入门

    http://www.yiibai.com/mongodb/mongodb_quick_guide.html 创建数据库 MongoDB use DATABASE_NAME 用于创建数据库.该命令如果 ...

  6. [knownledge][latex] LaTex入门

    序言 最近需要写一份文档, 时间也不是特别紧. 之前一直用markdown写文档. 始终想学一下LaTex, 毕竟是学术论文界的工具. 在提及LaTex的内容之前. 事必是一定要首先提及高德纳的. 他 ...

  7. mongodb shell和Node.js driver使用基础

    开始: Mongo Shell 安装后,输入mongo进入控制台: //所有帮助 > help //数据库的方法 > db.help() > db.stats() //当前数据库的状 ...

  8. Linux 数据重定向

    名称 描述 代码 表示 stdin 标准输入 0 < 或 << stdout 标准输出 1 > 或 >> stderr 标准错误输出 2 2> 或 2> ...

  9. gnome3增加自定义程序快捷方式

    gnome3增加自定义程序快捷方式   1. 安装alacarte   在命令行输入下列命令安装alacarte程序   yum -y install alacarte   安装完毕后,在命令行输入下 ...

随机推荐

  1. Could not find the Visual SourceSafe Internet Web Service connection information

    Visual SourceSafe Internet---------------------------Could not find the Visual SourceSafe Internet W ...

  2. java泛型中? super T和? extends T的区别

    <? super T>表示包括T在内的任何T的父类,<? extends T>表示包括T在内的任何T的子类;请记住PECS原则:生产者(Producer)使用extends,消 ...

  3. UIButton上图片和文字的位置调整

    UIButton 上默认是图片在左文字在右,而大多数情况这样默认的的显示形式都不能满足我们的需求,接下来我就这个问题分享一下我的心得. 默认情况下,不设置的效果,都是居中实现 UIButton *bu ...

  4. Swift中类的两段式构造(类的构造过程)

    import Foundation /* 类的构造需要两个阶段: 第一阶段: 1.程序调用子类的某个构造器 2.为实例分配内存, 此时实例的内存还没有被初始化 3.指定构造器确保子类定义的所有实例存储 ...

  5. java文件io过滤器

    package cn.stat.p1.file; import java.io.File; public class newfilelist { /** * @param args */ public ...

  6. angularjs中ng-switch的用法

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app" ng-controller="ctr ...

  7. Content-Disposition的作用及用法

    Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件.Content-disposition其实可以控制用户请求所得的内容存为一个 ...

  8. angular json转义html

    第一步json输出的内容反编码 function htmldecode(s){ var div = document.createElement('div'); div.innerHTML = s; ...

  9. 恢复root用户目录，及~目录

    普通帐号登su;mkdir /root;chown root:root /root cp -R /etc/skel/.[!.]* ./

  10. soapUI通过groovy脚本设置超时时间

    import com.eviware.soapui.SoapUI import com.eviware.soapui.settings.HttpSettings import com.eviware. ...