<!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. LPCTSTR LPCWSTR LPCSTR 含义

    #ifdef UNICODE#define LPCTSTR LPCWSTR#else#define LPCTSTR LPCSTR#endif      LPCTSTR A 32-bit pointer ...

  2. apollo实现c#与android消息推送(二)

    安装完成apache apollo后,org.eclipse.paho是很方便的测试软件,下来介绍paho的安装和使用 2. 搭建paho: a 下载 org.eclipse.paho.ui.app- ...

  3. Gaussian and Truncated Gaussian

    Everybody knows about Gaussian distribution, and Gaussian is very popular in Bayesian world and even ...

  4. 程序员网站开发时应该注意的SEO问题

    一.链接的统一性 搜索引擎排名最主要的因素就是网站内容和链接,假如网站内部链接不一致,在很大程度上直接影响着网站在搜索引擎中的排名.例如彩票专营店导航栏中的“首页”链接,程序员在开发时可能会有以下几种 ...

  5. mysql慢查询分析工具 mysqlsla 安装

    概述 mysqlsla 是一款很不错的mysql慢查询日志分析工具,而且简单易用.mysqlsla 是用perl编写的脚本,运行需要perl-DBI和per-DBD-Mysql两模块的支持.mysql ...

  6. ZOJ2345Gold Coins 简单分块

    昨天做过一样的题: 平方和公式:n*(n+1)*(2n+1) #include<cstdio> #include<cstdlib> #include<iostream&g ...

  7. NOIP初赛 之 逻辑运算

    NOIP初赛 之 逻辑运算 逻辑运算先掌握各种运算,注意运算符的级别比较,做题是要细心.在NOIP中一般一题,分值为1.5分. 概念介绍: 非:not  ¬      与:and ∧      或:o ...

  8. angular实现输入框输入添加 搜索框查询

    !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g ...

  9. sqlite3基本相关使用

    闲来无事,复习和总结了一下之前学习到的关于sqlite3数据库的相关知识: [1] sqlite3的安装:1.离线安装:sudo dpkg -i *.deb2.在线安装:sudo apt-get in ...

  10. win10 uwp InkCanvas控件数据绑定

    本文主要说如何绑定InkCanvas,让笔画变化的时候我们可以知道. 我们本来的InkCanvas没有提供笔画绑定,所以我们自己写 using Windows.UI.Input.Inking; usi ...