<!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. 路过--<全世界谁倾听你>

    这首歌大概就是说男生和女生分手了男生一直忘不了女生给他带来的感觉(那种只有那个女生才能给男生带来的喜欢)就算黄昏 还是清晨 男生是男生的清晨 女生是女生的黄昏两个人没有交集了就算雨和歌都停了 风还是会 ...

  2. 域名访问和ip访问区别

    域名访问和ip访问区别 ip访问对应某一台确定的服务器: 域名访问相当于在ip访问的基础上,做了一个反向代理的中间功能.例如:百度,很多人会同时使用,如果使用的是同一台服务器的话,服务器估计会扛不住, ...

  3. 一文读懂MQTT协议

    1  概述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级 ...

  4. position: absolute 如果不设置left, right, top, bottom会在什么位置

    一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图 1.一个大盒子中4个小盒子, 正常文档流布 ...

  5. redux 基础

    antd 的使用 1.安装npm install antd --save 2.引入到项目中 import 'antd/dist/antd.css'; // or 'antd/dist/antd.les ...

  6. vue css动画原理

    从隐藏到显现 从显现到隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. mysql 日期函数大全

    对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型. 这里是一个使用日期函数的例子.下面的查询选择了所有记录,其date_col的值是在最后30天以内: my ...

  8. 使用gulp管理sass文件

    前提是npm和ruby已经安装好 1. 新建文件夹myproject,cd进入文件夹 再npm init 初始化 2.npm install gulp --save-dev 为项目添加gulp,并将g ...

  9. split("\\s+") 和 split(" +") 有什么区别?

    原文地址:https://blog.csdn.net/it_taojingzhan/article/details/51968993 "hello world, this is Al&quo ...

  10. jsp2自定义标签+属性

    前面说过jsp2自定义标签如果要加入属性需要设置属性的getter和setter方法.代码如下: public class GetParam extends SimpleTagSupport { pr ...