<!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. Check for Palindromes-FCC

    問題: 检查回文字符串 如果给定的字符串是回文,返回true,反之,返回false. 如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文). ...

  2. Hive基础（4）---Hive的内置服务

    版权声明:<—— 本文为作者呕心沥血打造,若要转载,请注明出处@http://blog.csdn.net/gamer_gyt <——   目录(?)[+]   一:Hive的几种内置服务 ...

  3. 怎样使用自定义标签简化 js、css 引入？

    国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...

  4. 使用javaAPI操作hdfs

    欢迎到https://github.com/huabingood/everyDayLanguagePractise查看源码. 一.构建环境 在hadoop的安装包中的share目录中有hadoop所有 ...

  5. poj2155一个二维树状数组

                                                                                                         ...

  6. JavaWeb（一）Servlet中的request与response

    一.HttpServletRequest概述 1.1.HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP ...

  7. 电脑IP地址被占用如何释放？

    回车后,关机,等待5分钟左右再开机,就释放掉了.

  8. C#打印机操作类

    using System; using System.Collections.Generic; using System.Text; namespace MacPrinter { public cla ...

  9. SqlServer和Oracle中一些常用的sql语句4 局部/全局变量

    --把wh1仓库号中姓名含有"平"字的职工工资在原来的基础上加288 update 职工备份 set 工资=工资+288 where 仓库号='wh1' and 姓名 like ' ...

  10. px转vw和vh的工具（对前端同学有用）

    CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面. 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPhone6的屏幕设计的. 前端开发工程师将这 ...