要求：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. online ddl与pt-osc详解

    Ⅰ.背景 优化sql的过程中发现表上少一个索引,直接加一个?会不会hang住?不加?sql又跑不好,由此引出一个问题--ddl操作怎么做? Ⅱ.闲扯三两句 5.6版本之前的MySQL创建索引不支持on ...

  2. 实现mybash

    任务内容 1.使用fork,exec,wait实现mybash 查找资料: fork函数 通过fork()系统调用我们可以创建一个和当前进程印象一样的新进程.我们通常将新进程称为子进程,而当前进程称为 ...

  3. usb_camera

  4. Spring中bean标签的属性和值：

    Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...

  5. pprint

    pprint = pretty printer 经常用来打印 字典.json 打印出的格式会是较为标准的格式 目的:方便调试,查看中间结果,因为觉得设断点调试相对麻烦. [运行环境:macOS 10. ...

  6. 你不知道的JavaScript-1.作用域是什么

    作用域是一套规则,用于确定在何处以及如何查找变量.函数等(标识符).如果查找的目的是对变量进行赋值,那么就会使用 LHS 查询:如果目的是获取变量的值,就会使用 RHS 查询. 赋值操作符会导致 LH ...

  7. Ocelot:API网关概要

    一.概要 Ocelot是.Net Core下一个开源API网关:Ocelot主要目标是在.NET在微服务或面向服务架构中提供统一的入口服务, Ocelot拿到HttpRequest对象到管道后,先创建 ...

  8. 队列ADT

    队列 队列是FIFO表,使用队列时在队尾(rear)插入元素,称之为入队(enqueue),以及在对头(front)删除并返回元素值,称之为出队(dequeue). 任何表的实现都可以用于实现队列结构 ...

  9. 关于easy ui 的combobox遍历选中

    $.post("fleetAction!queryAllCompanyByCompanyID.do",{"truckCompany.id":companyId} ...

  10. Java IO--NIO（二）

    在我的上一篇文章JavaNIO详解(一)中介绍了关于标准输入输出NIO相关知识, 本篇将重点介绍基于网络编程NIO(异步IO). 异步IO 异步 I/O 是一种没有阻塞地读写数据的方法.通常,在代码进 ...