<!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. ThinkPHP中：RBAC权限控制的实习步骤

    使用版本ThinkPHP3.1.3 第一步,建表及数据 第二步,建关联模型 第三步,控制器使用关联模型.配置文件 第四步,模板显示数据 第一步,建表及数据 在数据库中,建立一个companysvn数据 ...

  2. Linux入门之常用命令（4）vi编辑器

    vi分为三种模式 一般模式:删除字符.删除整行.复制粘贴等操作 编辑模式:i o a r进入 输入字符  Esc退出 命令行模式::或/ 将光标移动到最末行 搜寻数据 读取或替换 退出vi 显示行号 ...

  3. NOIP2017SummerTraining0705

    个人感受:这一场考试是网开着的,然后第一题就水过了,第二三题应该是暴力吧,然后各水了50.拿了200分.排名第10. 问题 A: 重复字符串 时间限制: 1 Sec  内存限制: 256 MB提交: ...

  4. idea自我使用简单使用方式和出现的一些简单问题以及常用快捷键

    首先配置完Idea的简单使用步骤后,今天在使用Idea时,一直持续提示web项目404的错误提示,因为之前使用idea时,部署的是springBoot的项目,使用的是SpringBoot自带的Tomc ...

  5. Codeforces Round #420 (Div. 2)

    /*************************************************************************************************** ...

  6. javascript特效300例----抄书喽

    -javascript300例- #body_div { background-color: #202425; color: white; margin: 0 auto; border: 5px gr ...

  7. 简单Elixir游戏服设计- 创建项目

    反正是写到哪算哪. 创建umbrella项目 mix new simple_game --umbrella 创建model项目 cd simple_game\apps mix new model 创建 ...

  8. 初学者易上手的SSH-struts2 01环境搭建

    首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框 ...

  9. 将 Intent 序列化，像 Uri 一样传递 Intent！！！

    一.真的需要new一个Intent吗? 在 Android 中,打开一个 Activity ,有多少种方式?不过不管是使用什么方式,最终都没办法逃避创建一个 Intent ,然后startActivi ...

  10. hibernate中各个jar包的含义和关系

    最基本的Hibernate3.3.2之 JAR包(必要): 包名 位置 用途 hibernate3.jar /hibernate 核心JAR包 antlr.jar /hibernate/lib/req ...