<!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. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  2. AD库转换为KiCAD库的方法

    AD库转换为KiCAD库的方法 参照博主另外一篇文档: AD转换为KiCAD的方法,点击此处

  3. Yii2的一些问题

    Yii2中删除能不能串着用 Yii2中find.findAll有什么区别 Yii2中User::findOne($id)和User::find->where(['id'=>1])-> ...

  4. js-原生js触发器使用

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. python 中的内置高级函数

    1.map(function,iterable) map是把迭代对象依次进行函数运算,并返回. 例子: map返回的十分map对象,需要list()函数转化. 2.exec()函数 执行储存在字符串或 ...

  6. MySql命令行无法显示中文

    好烦遇到了,遇到MySql命令行无法显示中文问题????? show variables like 'char%';//显示字符集 set names utf8;//设置字符集 describer t ...

  7. MySql精简

    安装的是免安装版MySql 由于MySql是开源的,故下载的时候源码也会包含,如果单纯只是使用其功能,则可以将这些文件删除为MySql减肥 可以删除的文件有如下: 1.mysql-test 文件夹: ...

  8. Codeforces 340B - Maximal Area Quadrilateral (计算几何)

    Codeforces Round #198 (Div. 2) 题目链接:Maximal Area Quadrilateral Iahub has drawn a set of \(n\) points ...

  9. python类的实例方法、静态方法和类方法区别及其应用场景

    https://blog.csdn.net/helloxiaozhe/article/details/79940321 普通实例方法,第一个参数需要是self,它表示一个具体的实例本身. 如果用了st ...

  10. 如何省略.jsx文件名

    在webpack.config.js文件夹中module.exports中添加: resolve:{ extensions:[".js", ".jsx", &q ...