//代码

<!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. P1368 工艺 SA/最小表示法

    正解:SA/最小表示法 解题报告: 传送门! 听说正解是最小表示法,,,O(n)然后常数还挺小的,,, 但是我不会QAQ! 所以先写下SA的做法趴,,,等get了最小表示法再来写正解QAQ 就这种题算 ...

  2. linux(centos7)设置tomcat开机启动

    1.在/etc/rc.d/rc.local中加入: #java environment export JAVA_HOME=/usr/java/jdk1.8.0_161 export CLASSPATH ...

  3. webservice学习教程（三）--

    快速入门 首先,我们来尝试一下调用别人写好的webService 来体验一把:我们访问http://www.webxml.com.cn/zh_cn/index.aspx 进入到里边 当我们输入一个号码 ...

  4. 设置js的ctx

    <script type="text/javascript" src="${ctx}/js/dynamic.jsp"></script> ...

  5. keras笔记

    函数式模型 函数式模型算是本文档比较原创的词汇了,所以这里要说一下 在Keras 0.x中,模型其实有两种,一种叫Sequential,称为序贯模型,也就是单输入单输出,一条路通到底,层与层之间只有相 ...

  6. 好用的一些 git 命令

    git stash  将已修改未提交的 改动保存起来   恢复用git stash pop gir revert  反转commit git rebase 更换基础分支 git grep  -n 显示 ...

  7. python集合set相关操作

    定义: 1.不同元素组成 2.无序 3.集合中的元素必须是不可变类型 创建集合 1 s = {1,2,3,4,5,6,7,8} 1.定义可变集合 1 2 3 >>> set_test ...

  8. unity开发多语言版本

    1.文字部分 ①.文字提取参考 http://www.xuanyusong.com/archives/2987: ②.把提取出来的文字放到excel总转换成繁体等版本: ③.把excel转换成txt文 ...

  9. OO第二单元电梯线程系列总结作业

    电梯系列第一次作业 功能描述: 傻瓜电梯无需考虑超载捎带 线程模式: Producer-Consumer Pattern 思路: 第一次作业是一个傻瓜电梯,分别有一个生产者生成电梯指令(也就是Inpu ...

  10. UML作业第一次：UML用例图绘制

    UML第一次作业 一. 用例图:用例图(usecase diagram)是UML用于描述软件功能的图形.用例图包括用例.参与者及其关系,用例图也可以包括注释和约束.程序员要画时序图啥的用其他的比较麻烦 ...