<!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. 提交disable的Select值到后台

    需求:界面上把select控件disable,然后将默认值传到后台 问题1:select disable: js中可以这样写: document.getElementById("provin ...

  2. new Date() vs Calendar.getInstance().getTime()

    System.currentTimeMillis() vs. new Date() vs. Calendar.getInstance().getTime() System.currentTimeMil ...

  3. vue+vue-cli2+webpack配置资源cdn

    vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn,哪里可以配置呢?下面我详细介绍 1.config/index.js中可以看到 module.exports = { ...

  4. 73. PrintStream(打印流)

    PrintStream(打印流)   打印流可以打印任意类型的数据,而且打印前都会把数据转换成字符串再进行打印(就是把数据存入硬盘中) 编码与解码图例:下面我们来看看一个简单的字节输出流 public ...

  5. ElasticSearch---初识

    1.概述 1.1 ElasticSearch是一个   基于Lucene   的  搜索服务器: 1.2 ElasticSearch 提供了一个分布式多用户能力的全文搜索引擎,基于  RESTful ...

  6. Robot Framework：接口测试

    ---恢复内容开始--- robotframework进行接口测试,需要安装Request和RequestLibrary包 pip install requests pip install -U ro ...

  7. jsp引擎是什么

    1.JSP引擎 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有webLogic和Tomcat.把这些支持JSP的web服务器配置好后,就可以在客户端通过浏览器来访问JSP页面了. 2.J ...

  8. ElasticSearch Roaring bitmap 和跳表联合查询

    ElasticSearch Roaring map 先把所有数按65535划分, 划分方法就是求商和余数,商代表数字最终在哪一块,余数代表最终在块内的数字 比如 1, 65536, 65537, 13 ...

  9. 配置Maven私服

    Nexus 是“开箱即用”的系统,不需要数据库,它使用文件系统加 Lucene 来组织数据,支持 WebDAV 与 LDAP 安全身份认证.Nexus 还提供了强大的仓库管理功能,构件搜索功能,它基于 ...

  10. linux 查看cpu，memory

    https://www.cnblogs.com/ctypyb2002/p/9792951.html