<!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. sqlServer MERGE 对数据进行修改或插入自动视别 特别用于批量数据的插入或修改

    sqlServer MERGE   对数据进行修改或插入自动视别 特别用于批量数据的插入或修改    MERGE  customer AS targetTable   --目标表    USING ( ...

  2. KiCAD实用操作

    KiCAD实用操作之一:自动编辑线宽 今天偶然间发现的一个比较实用的功能,算是KiCAD的一个优点吧(或许是在AD上面没发现):当整个PCB布完线或者在布线过程中,我们有可能需要对某个线的宽度进行调整 ...

  3. Android 6.0 - 动态权限管理的解决方案(转)

    转自:http://www.cnblogs.com/dubo-/p/6018262.html Android 6.0 - 动态权限管理的解决方案   转载请标注 Android 6.0版本(Api 2 ...

  4. vue 父子组件数据双向绑定

    父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...

  5. 超实用的HTML代码段(赵荣娇)

    第1章 创建HTML文档 11.1 HTML文档的基本结构 2 <html> <head> <title>Title of page</title> & ...

  6. ecshop前台英文后台中文的设置方法

    ecshop前台英文后台中文的设置方法 这里有两种方法: 第一种方法: 打开 admin/includes/init.php 文件 找到$_CFG = load_config(); 在它下面增加一行代 ...

  7. vue基础二

    1.vue实例 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的.在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选 ...

  8. 【LeetCode 27】移除元素

    题目链接 [题解] 沙比提 [代码] class Solution { public: int removeElement(vector<int>& nums, int val) ...

  9. 【书上讲解】最大m段子段和问题

    描述 [题解] 设f[i][j]表示前i个数字分成了j段的最大子段和. 则f[i][j] = max(f[i-1][j]+a[i] (第i个数字和第j段合在一起),f[k][j-1]+a[i] (第i ...

  10. 中位数+暴力——cf433C

    /* 中位数到所有数的距离之和最小 因为只能改一个数,所以我们找一个数,将其改为和其相邻的数的中位数,使答案最小 先求一次原答案 把每个数相邻的数用vector存下来,然后排序找中位数,计算减小的量 ...