要求：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. BOM设计的一些问题及解决方案探讨----合版BOM

    BOM是ERP的核心资料,也是比较难的一块,不仅涉及的内容多,要求准确性高,时效性也要求高.但传统的ERP在处理BOM时有不少问题,因此也有些软件公司引入了各种BOM类型,像"标准BOM&q ...

  2. Can't connect to MySQL server (10060) MySQL

    x 搜索了一下N篇解决方案都是在说以下3种原因... .{"防火墙的问题":["防火墙未关闭","服务器上防火墙端口未开放"]} 2.[&q ...

  3. Spark Streaming实战演练

    一.spark streaming简介 Streaming是一种数据传输技术,它把客户机收到的数据变成一个稳定连续的流,源源不断的输出,使用户听到的声音和图像十分稳定,而用户在整个文件传输完成开始前就 ...

  4. 把vim改装为source sight

    本文在ubuntu18.04上实践. 主要为VIM 安装4个插件: taglist,srcexpl,NERD_tree,ctrlp 1,taglist.vim :https://www.vim.org ...

  5. MySQL 大表优化方案（长文）

    当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部署.运维的各种复杂度,一般以整型 ...

  6. vim diff 使用

    1. 可以在用户目录下编辑.vimrc 文件,设置vim格式.如无该文件,添加即可vim ~/.vimrc 内容自己添加set ts=4 "set tabstop=4set nu    &q ...

  7. windows下cmd无法使用telnet命令解决方法 (原)

    telnet不是内部或者外部命令,也不是可运行程序-----解决办法: (win7为例) 控制面板 --- > 程序(小图标下直接到[程序和功能]) --- >程序和功能 --- > ...

  8. nuxtjs中使用axios

    最近使用nuxtjs服务端渲染框架,在异步请求时遇到两个问题,一是怎么使用axios, 二是怎么在asyncData方法中使用axios 当使用脚手架create nuxt-app创建项目时,会提示是 ...

  9. [ Python ] KMP Algorithms

    def pmt(s): """ :param s: the string to get its partial match table :return: partial ...

  10. Spring Boot 全局异常捕获

    import javax.servlet.http.HttpServletRequest; import org.springframework.web.bind.annotation.Control ...