要求：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. PAT甲级1135 Is It A Red-Black Tree？【dfs】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805346063728640 题意: 给定一棵二叉搜索树的先序遍历结 ...

  2. Codeforces 1138 - A/B/C/D/E - (Undone)

    链接:https://codeforces.com/contest/1137 A - Skyscrapers 题解:对于每一段 $1$ 和每一段 $2$,统计他们的长度.因此对于相邻的两段长度求较小值 ...

  3. Web开发——JavaScript基础（JSON教程）

    参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...

  4. 【转】AngularJS动态生成div的ID

    AngularJS动态生成div的ID 原文链接:http://blog.csdn.net/you23hai45/article/details/52348078 1.问题背景 给定一个数组对象,里面 ...

  5. 实现mybash

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

  6. Spring Boot 注解配置 day03

    一.SpringBoot注解 @PropertySource 和 @ImportResource和@Bean 1.@PropertySource 加载指定位置的配置文件(只能是properties文件 ...

  7. 唯美MACD-完全版

    前言: 自己很喜欢MACD这个指标,因为很欠缺所以就搜集的多一点,有人问,学习缠为什么还这么搜集些Macd的资料呢?因为在分析走势(或盘整背驰.或趋势背驰)的时候我的习惯使用Macd做辅助判断,所以M ...

  8. Linux命令之rpm安装命令

    在 Linux 操作系统下,几乎所有的软件均通过RPM 进行安装.卸载及管理等操作.RPM 的全称为Redhat Package Manager ,是由Redhat 公司提出的,用于管理Linux 下 ...

  9. 四、UI开发之核心基础——约束（实用）

    概述 本节将会介绍最常用的几种约束,基本可以满足90%以上的UI布局要求. 先附上一份其他优秀博客https://blog.csdn.net/companion_1314/article/detail ...

  10. ionic 需要注意的知识点