<!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. Linux学习——yum学习和光盘yum源搭建

    在rmp安装的时代,rpm包依赖让安装人员头大,而且头疼,有了yum后整个的安装更加简单和方便. yum源文件 1.yum源的介绍: 将所有的软件包放到官方服务器上,当进行yum在线安装时,可以自动解 ...

  2. Huge Mission

    Huge Mission Problem Description Oaiei is busy working with his graduation design recently. If he ca ...

  3. java中的finally用return也挡不住

    今晚做了科达的题,有一题就是这个意思,我自以为return中断一切,然而事实摆在眼前:

  4. springMVC中的redirect和forward区别？

    1.forward在跳转后可以取到message值,redirect在跳转后无法取到message值. 2.forward跳转后地址栏URL不会改变,而redirect会改变.

  5. Interface request structure used for socket ioctl's

    1. 结构体定义 /* * Interface request structure used for socket * ioctl's. All interface ioctl's must have ...

  6. BitmapImage 读取内存流和显示图片

    FileStream filestream = File.OpenRead(@"C:\Users\Administrator\Desktop\queryHeaderImg.png" ...

  7. redis的sentinel主从切换(failover)与Jedis线程池自动重连

    本文介绍如何通过sentinel监控redis主从集群,并通过jedis自动切换ip和端口. 1.配置redis主从实例 10.93.21.21:6379 10.93.21.21:6389 10.93 ...

  8. 记录一次因为硬盘写满造成的redis无法连接

    缘起: 今天早晨收到报警,服务不干活了,赶紧起来看问题... 为了尽快让服务可用,尝试重启服务,发现服务起不来,报错 redis connection failed! 看起来是redis挂了,但是发现 ...

  9. WDA的配置

    WDA的配置 SAP的技术总是搞得很复杂,WDA的涉及到配置如下: 1. Internet Communication Manager 确认ICM中提供的HTTP/HTTPS运行正常. Tcode: ...

  10. sql server 2008 18456错误

    来自:http://blog.csdn.net/qishuangquan/article/details/6024767 百度搜18456错误几乎只能搜到一篇文章,并不是说结果条数,而是所有的文章都是 ...