要求：1.添加数据显示在下方列表。2.添加的数据可动态删除。

界面显示：

代码：

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <meta charset="UTF-8">

</head>

<body>

<h1>添加用户</h1>

姓名：<input type="text" name="username" id="username"  />

电子邮件：<input type="text" name="email" id="email" />

电话：<input type="text" name="phone" id="phone" />

<input type="button" value="提交" id="tijiao">

<br/><br/><br/><br/>

<hr/>

<table border="1px" width="400px" id="table_data">

    <tr>

        <td>姓名</td>

        <td>电子邮件</td>

        <td>电话</td>

        <td></td>

    </tr>

    <tr>

        <td>test</td>

        <td>test@qq.com</td>

        <td>15512341235</td>

        <td><a href="test.php"/>删除</td>

    </tr>

</table>

<script type="text/javascript">

    $("#tijiao").click(function(){

        var user_name=$('#username').val();

        var user_email=$('#email').val();

        var user_phone=$('#phone').val();

        // ****************一步到位法*****************************

        // 无法绑定删除事件

        $tr="<tr><td>"+user_name+"</td><td>"+user_email+"</td><td>"+user_phone+"</td><td><a href='test_del.php'>删除</a></td></tr>";

        $("#table_data").append($tr);

        //****************方法二*****************************

        //1.先将tr变量append在table下

        //2.在将每个元素的值（name、email、phone）添加到tr下

        $tr=$("<tr></tr>");

        $username=$("<td></td>");

        $username.text(user_name);

        $email=$("<td></td>");

        $email.text(user_email);

        $phone=$("<td></td>");

        $phone.text(user_phone);

        // 给超链接绑定属性

        $del=$("<td></td>");

        $del_a=$("<a></a>");

        $del_a.text("删除");

        $del_a.attr("href","del.php?name=user_name");

        $del.append($del_a);

        //将每个元素的值（name、email、phone）添加到tr下

        $tr.append($username);

        $tr.append($email);

        $tr.append($phone);

        $tr.append($del);

        // 将tr变量append在table下

        $("#table_data").append($tr);

        // 给超链接绑定属性

        $del_a.click(function(){

            // 获取姓名的方式一

            // var b= window.confirm("确认要删除？"+user_name);

            // 获取姓名的方式二

            var b=window.confirm($(this).parent().parent().children().eq(0).text());

            if (b) {

                $(this).parent().parent().remove();

                return false;

            }else{

                return false;

            }

        });

    });

</script>

</body>

</html>

【八】jqeury之click事件[添加及删除数据]的更多相关文章

  1. 模拟C#的事件添加和删除

    从<C# Via CLR>中的演化的一个小demo,探索事件的添加和删除原理,简单明了: using System; using System.Collections.Generic; u ...

  2. GridControl控件添加按钮列及在按钮Click事件中得到行数据 zt

    在GridControl中添加按钮列的步骤如下: 1. 把列的ColumnEdit属性设置为RepositoryItemButtonEdit 2. 把TextEditStyle属性设置为HideTex ...

  3. Oracle的学习二：表管理(数据类型、创建/修改表、添加/修改/删除数据、数据查询)

    1.Oracle表的管理 表名和列名的命名规则: 必须以字母开头: 长度不能超过30个字符: 不能使用oracle的保留字: 只能使用如下字符:A-Z, a-z, 0-9, $, # 等. Oracl ...

  4. Sql Server有主外键关系时添加、删除数据

    当表之间有主外键关系时删除数据会被约束,添加.删除失败 解决办法,我们可以先把主外键关系的检查约束给关掉 → 然后删除数据 → 之后再把约束打开 查询出关掉所有外键约束的语句 SELECT 'ALTE ...

  5. Mysql添加更新删除数据-表

    例如 此处拥有一个表名为 uuser 为表添加新数据 ,'); ,'); ,'); 假如只想添加uid和uname ,'小张'); 那么pas自动填充为NULL. 为表更新数据 这里把小王的pas改成 ...

  6. jQuery focus、blur事件 添加、删除类名

    jQuery.focusblur = function(ele,className){ var focusblurid = $(ele); focusblurid.focus(function(){ ...

  7. jQuery实现表单动态添加与删除数据操作示例

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  8. js array 数组添加与删除数据

    //新建数组 var ids =new Array(); //向数组中添加数据 ids.push(1); //删除下标为i的数组元素 ids.remove(i); //自定义删除函数: Array.p ...

  9. Django（六）实战2：向数据库添加，删除数据、重定向写法、重定向简写

    一.向数据库添加图书数据 [上接]https://blog.csdn.net/u010132177/article/details/103831173 1)首先开启mysql服务,并运行项目 启动my ...

随机推荐

  1. Ububtu 14.04 安装 Hadoop 2.7.3

    1.首先安装java,配置java开发环境 下载jdk:http://www.oracle.com/technetwork/java/javase/archive-139210.html选择你想要下载 ...

  2. LINUX常用命令 --- 权限篇

    linux常用命令 linux用户权限相关 root 用户    相当于群主    超级用户 sudo命令   相当于群管理员 普通用户    群成员 查看用户id信息      使用linux    ...

  3. .NET Core 2.1 源码学习：看 SocketsHttpHandler 如何在异步方法中连接 Socket

    在 .NET Core 2.1 中,System.Net.Sockets 的性能有了很大的提升,最好的证明是 Kestrel 与 HttpClient 都改为使用 System.Net.Sockets ...

  4. 使用阿里云公网ip建立bind，监听客户端连接失败

    bind: Cannot assign requested address 网上的众多答案不能解决我的问题 通过ping可以ping通,但是 使用bind代码,这个ip就是不能用的, 使用 ifcon ...

  5. 16.4-uC/OS-III同步 （任务信号量）

    信号量和消息队列均是单独的内核对象,是独立于任务存在的. 任务信号量 仅发布给一个特定任务 .任务消息队列 可以发布给多个任务. 任务信号量伴随任务存在,只要创建了任务,其任务信号量就是该任务的一个数 ...

  6. python 当前时间多加一天、一小时、一分钟

    datetime模块 import datetime # 获取当前时间 print(datetime.datetime.now()) # 2017-07-15 15:01:24.619000 # 格式 ...

  7. MD5在线加密的应用

    MD5是message-digest algorithm 5(信息-摘要算法)的缩写.被广泛用于加密和解密技术上,是文件的“数字指纹”.可以对用户的密码进行加密操作,是不可逆的,所以用户输入的密码经过 ...

  8. 关于Oracle 10.2.0.5 版本应用SCN补丁14121009相关问题

    环境:OEL 5.7 + Oracle 10.2.0.5 背景:Oracle发布的两篇关于2019年6月份将自动调整高版本数据库的SCN COMPATIBILITY的MOS文章引起了很多客户的恐慌,尤 ...

  9. C#设计模式(2)——简单工厂模式（转）

    C#设计模式(2)——简单工厂模式   一.引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理 ...

  10. 爬虫出现Forbidden by robots.txt（转载 https://blog.csdn.net/zzk1995/article/details/51628205）

    先说结论,关闭scrapy自带的ROBOTSTXT_OBEY功能,在setting找到这个变量,设置为False即可解决. 使用scrapy爬取淘宝页面的时候,在提交http请求时出现debug信息F ...