<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">

 $(function(){
     //find() 是找到对应的子节点  它的返回值是一个jQuery的对象
     //只要是调用了jQuery的方法，如果这个方法的返回值是一个对象  那么这个对象一定是jQuery对象

     //删除按钮的事件
     function remo(aa){
    var $aa = $(aa).parent().parent();
        var aa =$aa.find("td:first").text();

    var flag = confirm("您确定删除"+aa+"么？")
    if(flag){
    $aa.remove();
    }
          return false;
     }

     $("#employeetable a").click(function(){
       return remo(this);
     })
     //添加按钮的事件
     $("#addEmpButton").click(function(){
    $("<tr></tr>").append("<td>"+$(":text[name='name']").val()+"</td>")
                    .append("<td>"+$(":text[name='email']").val()+"</td>")
                        .append("<td>"+$(":text[name='salary']").val()+"</td>")
                            .append("<td><a href='#'>Delete</a></td>")
                                .appendTo("#employeetable")
                                    .find("a")
                                        .click(function(){
                                            return remo(this);
                                        })    

    });

 })

</script>
</head>
<body>

    <center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
            name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
            name="salary" id="salary" /> <br> <br>
        <button id="addEmpButton" value="abc">Submit</button>
        <br> <br>
        <hr>
        <br> <br>
        <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="deleteEmp?id=001">Delete</a></td>
                </tr>
                <tr>
                    <td>
                        Jerry
                    </td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td><a href="deleteEmp?id=002">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td><a href="deleteEmp?id=003">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>

</body>
</html>

jQuery添加删除节点例子第十节"员工增删表"的更多相关文章

  1. mongodb replica set 添加/删除节点方法--http://www.ii123.com/jc/bc/bczh/258948.html

    replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点  代码如下   re ...

  2. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  3. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  4. MongoDB添加删除节点

    副本集添加删除节点 sharding添加删除节点 先将节点设置为hidden,再remove

  5. redis cluster 添加/删除节点操作

    RedisCluster 添加/删除节点 添加节点新配置两个测试节点8008和9009 [root@--- ~]# /usr/local/redis-/bin/redis-server /u02/re ...

  6. 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  7. jQuery中删除节点方法remove()、detach()、empty()分析

    jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并 ...

  8. RedisCluster 添加/删除节点

    一,redis cluster命令行 //集群(cluster) CLUSTER INFO 打印集群的信息 CLUSTER NODES 列出集群当前已知的所有节点(node),以及这些节点的相关信息. ...

  9. Hadoop日常维护系列——Hadoop添加删除节点

    添加节点 1.修改host    和普通的datanode一样.添加namenode的ip 2.修改namenode的配置文件conf/slaves    添加新增节点的ip或host 3.在新节点的 ...

随机推荐

  1. 洗礼灵魂，修炼python（3）--从一个简单的print代码揭露编码问题，运行原理和语法习惯

    前期工作已经准备好后,可以打开IDE编辑器了,你可以选择python自带的IDLE,也可以选择第三方的,这里我使用pycharm--一个专门为python而生的IDE 按照惯例,第一个python代码 ...

  2. Codeforces 858A. k-rounding 数论

    题目: 题意:输入n和k,找到一个最小的数,满足末尾有至少k个0和是n的倍数. 最小的情况 ans = n,最大的情况 ans = n*pow(10,k). 令 k = pow(10,k); 我们发现 ...

  3. Saturday SQL Server 2016 初体验

    最近在开发一个有关数据库的项目,我想用SQLite,但是SQLite的设计器不是特别友好,然后据说VS有一个集成的SQLite设计器,但是我用的VS2017亲测并没有,用户体验不佳,所以安装一个SQL ...

  4. 简单Elixir游戏服务器-安装Elixir

    用WebInstaller 安装半天也没下载成功文件. 改成直接下载erlang 和 elixir 预编译包了. 安装很简单,最后设置好环境变量. cmd 执行 elixir -v 最后顺便下载了个g ...

  5. 我的第一个python web开发框架（6）——第一个Hello World

    小白中午听完老菜讲的那些话后一直在思考,可想来想去还是一头雾水,晕晕呼呼的一知半解,到最后还是想不明白,心想:老大讲的太高深了,只能听懂一半半,看来只能先记下来,将明白的先做,不明白的等以后遇到再学. ...

  6. 给vue项目添加ESLint

    eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一 ...

  7. Java 继承、抽象、接口

    一.继承 1. 概述 继承是面向对象的重要特征之一,当多个类中存在相同的属性和行为时,将这些内容抽取到单独一个类中,那多个类中无需再定义这些属性和行为,只需继承那个单独的类即可. 单独的类称为父类或超 ...

  8. QQ--基于TCP/UDP协议的通讯原理

    QQ是一个基于TCP/UDP协议的通讯软件  发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服 务器,只不过不是常用的那些,那个服务器是腾讯自行开发的!   一 ...

  9. SAP 月结F.19与GR/IR

    http://blog.sina.com.cn/s/blog_3eeba40101008v75.html 为什么要做月结?月结究竟都结些啥? 月结的目的和手段都不知道,只知道一部分.月结,为了出资产负 ...

  10. C＃委托

    关于什么是委托,委托如何使用,我在这里就不说了. 需要说的: 委托是函数指针链 委托的 BeginInvoke 委托如果出现异常,会如何 如果不知道函数指针,可以继续往下看,我来告诉大家,为何需要委托 ...