要求：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. Oracle课程档案，第十三天

    配置可恢复性: ontrol_files:控制文件 parameter:参数 show:显示 select name from v$database; 查看当前的数据库★★ 控制文件SQL> s ...

  2. bootstrap-treeview 中文开发手册

    官方文档URL:  https://www.npmjs.com/package/bootstrap-treeview 2017年11月21日10:45:10 演示:http://www.htmleaf ...

  3. the pitfull way to create a uClinux image including gdb.

    After downloaded and installed the GCT's SDK and toolchain, we try to make an our own image which in ...

  4. Yarn vs npm: 你需要知道的一切（转）

    英文原文:https://www.sitepoint.com/yarn-vs-npm/ 译文:http://web.jobbole.com/88459/ Yarn 是 Facebook, Google ...

  5. 希尔排序（Python实现）

    目录 1.for版本--希尔排序 2. while版本--希尔排序 3. 测试用例 4. 算法时间复杂度分析 1.for版本--希尔排序 def shell_sort_for(a_list): ''' ...

  6. 菜鸟手下的iOS开发笔记(swift)

    在阳春4月的一天晨会上,有一个老板和蔼的对他的一个菜鸟手下说:“你既然会Android,那你能不能开发iOS?” 不是说好的要外包的吗?内心跌宕,但是表面淡定的菜鸟手下弱弱的回道:“可以试试”. 第二 ...

  7. hive使用动态分区时如果动态分区的字段存在空值的问题

    hive的数据是放到hdfs中,当我们的分区字段类型为string时,如果使用动态分区向表中插入数据,而动态分区的那个字段恰好为null或者空字符串,这样hive会为其选一个默认的分区,我们查数据时分 ...

  8. HDU 1160

    FatMouse believes that the fatter a mouse is, the faster it runs. To disprove this, you want to take ...

  9. ASP.NET MVC案例教程（二）

    ASP.NET MVC案例教程(二) 让第一个页面跑起来 现在,我们来实现公告系统中的第一个页面——首页.它非常简单,只包括所有公告分类的列表,并且每个列表项是一个超链接.其中分类数据是用我们的Moc ...

  10. 本地设置VirtualBox虚拟机

    主要是涉及到网卡设置,允许本地ping虚拟机