<!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. Nodejs常用代码段

    1､利用createReadStream方式计算大文件的md5签名 const fs = require('fs'); const crypto = require('crypto'); let pa ...

  2. 前端学习(二）css样式笔记（笔记）

    background-image:url(img/xiaofeiji.jpg)背景图:url(图片路径):(背景图默认平铺) background-repeat:repeat-x/repeat-y/n ...

  3. 转帖 使用eclipse创建之前没有创建的web.xml

    由于在下学习Java的时间不长,所以对于一些工具的使用不太熟悉,特别是eclipse,虽然这是一款强大的Java编译工具但是现有汉化版.所以在实际使用的时候难免会遇到各种各样的麻烦.今天就遇到了一个: ...

  4. 项目实战 - 混合式App开发

    为何要使用混合式开发? 要说为什么使用Hybrid App [混合式开发],就要先了解什么是Native App[原生程序], Web App[网站程序]. Native App 是专门针对某一类移动 ...

  5. Python查看文件属性

    import os print(os.stat('my_module.py')) 输出: os.stat_result(st_mode=33188, st_ino=7348222, st_dev=16 ...

  6. final关键字和static关键字

    final关键字:最终态--修饰成员变量,成员方法,类 final修饰变量: 基本类型变量:该变量为常量不能被赋值 引用类型变量:该地址不能被概变 地址不能被概变的原因: final Student ...

  7. 【leetcode】957. Prison Cells After N Days

    题目如下: There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, wheth ...

  8. 分布式项目pom

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  9. 【2017中国大学生程序设计竞赛 - 网络选拔赛】Friend-Graph

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6152 [题意] 有一个队伍,如果队伍里有三个或三个以上的人互相认识 或者队伍里有三个或三个以上的人互相不 ...

  10. 高级运维(三)：部署Lnmp环境、构建Lnmp平台、地址重写

    一.部署LNMP环境 目标: 安装部署Nginx.MariaDB.PHP环境 1> 安装部署Nginx.MariaDB.PHP.PHP-FPM: 2> 启动Nginx.MariaDB.FP ...