//代码

<!DOCTYPE HTML>

<html>

   <head>

    <meta charset="utf-8">

    <title>添加记录练习<title>

    <link rel="stylesheet" type="text/css" href="css.css"/>

   </head>

   <body>

    <table id="employeeTable">

     <tr>

      <th>Name</th>

      <th>Email</th>

      <th>Salery</th>

      <th> </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>

    </table>

    <div id= "formDiv">

        <h4>添加新员工</h4>

        <table>

        <tr>

        <td class="word">name:</td>

        <td class="inp">

        <input type="text" name="empName" id="empName"/>

        </td>

        </tr>

        <tr>

        <td class="word">email:</td>

        <td class="inp">

        <input type="text" name="email" id="email"/>

        </td>

        </tr>

        <tr>

        <td class="word">salary:</td>

        <td class="inp">

        <input type="text" name="salary" id="salary"/>

        </td>

        </tr>

        <tr>

        <td colspan="2" align="center">

        <button id="addEmpButton" value="abc">Submit</button>

        </td>

        </tr>

        </table>

    </div>

   <script type="text/javascript" src="jquery-1.10.1.js"></script>

    <script type="text/javascript">

 //1、添加

 //2、删除

$('#addEmpButton').click(function(){

//1、收集输入的数据

var $empName =$('#empName')

var $email = $('#email')

var $salary = $('#salary')

var empName = $empName.val()

var email = $email.val()

var salary = $salary.val()

//2、生成对应的<tr>标签结构，并插入#employeeTable的body中

$('<tr></tr>')

    .append('<td>'+empName+'</td>')

    .append('<td>'+email+'</td>')

    .append('<td>'+salary+'</td>')

    .append('<td><a href="deletEmp?id=" '+Date.now()+'>Delete</a></td>')

    .appendTo('#employeeTable>tbody')

    .find('a')

    .click(clickDelete)

//3、清除输入

    $empName.val('')

    $email.val('')

    $salary.val('')

})

//给所有删除链接绑定点击监听

$('#employeeTable a').click(clickDelete)

/*

点击删除的回调函数

*/

function clickDelete(){

    var $tr = $(this).parent().parent()

    var name = $tr.children(':first').html()

    if(confirm('确定删除'+name+'吗')){

        $tr.remove()

  }

   return false

}

    </script>

   </body>

</html>

jQuery添加删除的更多相关文章

  1. jQuery添加删除元素

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

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

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

  3. jQuery添加删除节点例子第十节"员工增删表"

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery 添加 删除 改动select option

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  5. jQuery添加/删除元素

    jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部). 追加前:<p>这是一个文本段落</p> $(" ...

  6. JQuery添加删除标签

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src= ...

  7. jQuery添加/删除Select的Option项

    使用语法1. $("#select_id").append("<option value='Value'>Text</option>") ...

  8. jQuery 增加 删除 修改select option .

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  9. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

随机推荐

  1. spring-session 2.0 实现细节

    一. 前置知识 1. redis 在键实际过期之后不一定会被删除,可能会继续存留 2. 具有过期时间的 key 有两种方式来保证过期 一是这个键在过期的时候被访问了 二是后台运行一个定时任务自己删除过 ...

  2. linx下对文件权限设置

    语法格式:chmod u+/-rwx,g+/-rwx,o+/-rwx filename 如:1. 给主人添加读权限,并减去执行权限:chmod u+r,u-x filename2. 给所有用户(主人. ...

  3. 关于mysql分组查询

    在mysql查询中,用到GROUP BY 根据某一字段分组之后,每组显示的结果都只有第一条,这样的结果通常不是我们想要的. GROUP_CONCAT('字段')   可以将每一组下面的这个字段所有的数 ...

  4. md5加密utils

    package cn.itcast.bos.utils;   import java.math.BigInteger; import java.security.MessageDigest; impo ...

  5. vim中自动格式化代码

    1,gg 跳转到第一行 2,shift+v 转到可视模式 3,shift+g 全选 4,按下神奇的 =

  6. Unity3D判断当前所在平台

    Unity3D是一个跨平台的开发工具,支持的平台五花八门,常常开发一款游戏要发布到不同的平台,在不同的平台上会使用不同的代码,难道要我们各平台分别使用一套代码,单独编译一次吗?当然不用了,呵呵.    ...

  7. synchronized锁级别的一个坑

    在实现一次对限流接口访问时,我错误的使用了单例+synchronized修饰方法的形式实现,这样在限流方规则为不同接口不同限制,单独限制时,同一个实例中的所有被synchronized修饰的方法竞争同 ...

  8. 父网访问子网（校园网访问校园网IP路由器下的一台电脑）远程路由器下的电脑

    网路由器添加转发规则,端口转发,本人仅使用Pandora Box路由器固件 当然设置了这些还不够,还需要设置其他的允许端口转发的东西,例如 然后远程桌面的话还需要设置某些相关设置,例如电脑允许使用远程 ...

  9. 使用4K分辨率,然后放大DIP200%,软件界面异常.

    简单:WFM主界面.AutoScaleMode  选中DIP,然后使用表格容器,容器分割,容器.就可以快速迁移旧程序. 复杂点:读取桌面分辨率,DIP放大....

  10. dos模式下切换电脑用户

    启用管理员运行dos 然后输入net user adminstrator /active.yes 然后点击打开按钮 就可以切换电脑用户了