<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="js/jquery-1.12.3.js"></script>

         <script>

             //代码从这里开始写

             $(function(){

                 //点击保存

                 $("#save").click(function(){

                     var tr = $("<tr></tr>").appendTo("#tab");

                     $("<td>"+ $("#uid").val() +"</td>").appendTo(tr);

                     $("<td>"+ $("#name").val() +"</td>").appendTo(tr);

                     $("<td>"+ $("#phone").val() +"</td>").appendTo(tr);

                     var td = $("<td><a href='#' >删除</a></td>").appendTo(tr); 

                     //es6写法

 //                    let demo = `<tr>

 //                                    <td>${$("#uid").val()}</td>

 //                                    <td>${$("#name").val()}</td>

 //                                    <td>${$("#phone").val()}</td>

 //                                    <td><a href="javascript:;">删除</a></td>

 //                                </tr>`;

 //                    $("#tab").append(demo);        

                     //删除事件 :可删除添加的tr,不能删除以前的

 //                    td.find("a").click(function(){

 //                        console.log(1);

 //                        $(this).parents("tr").remove();

 //                    })

                 })

                 //删除事件 可以删以前的，不能删除添加的

 //                $("a").click(function(){

 //                    console.log(2);

 //                    $(this).parents("tr").remove();

 //                })

                 //可删除以前的，也可删添加的

                 $("body").on("click", "a", function(){

                     $(this).parents("tr").remove();

                 })

             })

         </script>

     </head>

     <body>

         ID <input type="text" id="uid"/>

         姓名<input type="text" id="name"/>

         电话<input type="text" id="phone"/>

         <input id="save" type="button" value="保存" />

         <table border="1" id="tab">

             <tr>

                 <th>Id</th>

                 <th>Name</th>

                 <th>Tel</th>

                 <th>操作</th>

             </tr>

             <tr>

                 <td>30</td>

                 <td>张三</td>

                 <td>13554354534</td>

                 <td><a href="#" >删除</a></td>

             </tr>

             <tr>

                 <td>40</td>

                 <td>李四</td>

                 <td>1355443434</td>

                 <td><a href="#">删除</a></td>

             </tr>

         </table>

     </body>

 </html>

jq-demo-在列表中添加新节点，点击删除的更多相关文章

  1. 在js中添加新节点

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

  2. 如何给SAP Cloud Connector Region列表中添加新的Region

    SAP help里提供了CloudFoundry和Neo环境下可用的Region和API endpoint: 当我们期望用SAP Cloud Connector连接某个SAP云平台Region时,一般 ...

  3. Hadoop集群添加新节点步骤

    1.在新节点中进行操作系统配置,包括主机名.网络.防火墙和无密码登录等. 2.在所有节点/etc/host文件中添加新节点 3.把namenode的有关配置文件复制到该节点 4.修改master节点s ...

  4. 大数据实操3 - hadoop集群添加新节点

    hadoop集群支持动态扩展,不需要停止原有集群节点就可以实现新节点的加入. 我是使用docker搭建的进群环境,制作了镜像文件,这里以我的工作基础为例子介绍集群中添加集群的方法 一.制作一个新节点 ...

  5. 向CDH5集群中添加新的主机节点

    向CDH5集群中添加新的主机节点 步骤一:首先得在新的主机环境中安装JDK,关闭防火墙.修改selinux.NTP时钟与主机同步.修改hosts.与主机配置ssh免密码登录.保证安装好了perl和py ...

  6. 使用percona xtradb cluster的IST方式添加新节点

    使用percona xtradb cluster的IST(Incremental State Transfer)特性添加新节点,防止新节点加入时使用SST(State SnapShop Transfe ...

  7. Hadoop-HBASE 热添加新节点

    Hadoop-HBASE 热添加新节点 环境:192.168.137.101 hd1192.168.137.102 hd2192.168.137.103 hd3192.168.137.104 hd4四 ...

  8. 在ubuntu中添加新硬盘

    在ubuntu中添加新硬盘 转载于 http://www.cnblogs.com/unipower/archive/2009/03/08/1406230.html  前言 安装新硬盘这种事情并不会经常 ...

  9. my35_MGR添加新节点

    MGR添加节点主要涉及以下两个参数 group_replication_group_seeds    #可以动态修改 group_replication_ip_whitelist      #需要关闭 ...

随机推荐

  1. shell变量替换扩展 字符串计数截取

  2. ubuntu18.4 搭建lamp环境

    一.Apache2 web服务器的安装: 可以先更新一下服务器(可选) 1.sudo apt update             # 获取最新资源包 2.sudo apt upgrade       ...

  3. 【LeetCode】贪心

    [452] Minimum Number of Arrows to Burst Balloons [Medium] 给一堆线段,使用最少的arrow,穿过所有的线段.陈题,第一条线段的终点. Inpu ...

  4. php文件锁阻塞模式和非阻塞模式

    1.阻塞模式(如果其它进程已经加锁文件,当前进程会等其它进程解锁后继续执行) <?php $handle = fopen('lock.txt', 'r'); //锁定 if(flock($han ...

  5. vue中watch简单使用

    watch是一个对象,具有键值对:键指被监听的数据,值指处理方式. 值类型包括以下三个: 第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 第二个是deep:其值是true或f ...

  6. Android中对消息机制(Handler)的再次解读

    今天遇到一些关于在子线程中操作Handler的问题,感觉又要研究源代码了,但是关于Handler的话,我之前研究过,可以参考这篇文章:http://blog.csdn.net/jiangwei0910 ...

  7. 前缀和+排序——cf1043E

    先不考虑第二个条件 要求i和所有其他人的分数和最小,选择x还是y,可以推出一个公式,即差xi-yi小的j都选y,反之都选x 那么按照xi-yi排序即可 然后再考虑第二个条件,做减法就行 /* xi+y ...

  8. 安全检测及分析神器—AppScan使用教程

    最近项目准备验收,所以最近在做项目验收的准备工作:我们公司规定,项目的安全检测必须通过才能进行项目验收:公司的安全部门用的检测软件就是大名鼎鼎的IBM Rational Appscan;在教由安全部门 ...

  9. 4-基于DoG的特征检测子(SIFT：稳定性好，实时性差)

    opencv实现 详细原理:https://blog.csdn.net/u010440456/article/details/81483145

  10. delphi 时间

    DELPHI高精度计时方法 //取毫秒级时间精度(方法一): var t1,t2:int64; r1:int64; begin t1:=GetTickCount;//获取开始计数 WINDOWS AP ...