<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户名注册</title>
  <script>
    $(document).ready(function () {
      $("#button").click(function () {
        var name = $("#yonghu").val();
        var mima = $("#mima").val();
        var youxiang = $("#youxiang").val();
        var tr = "<tr><td>" + '<input type="checkbox">' + "</td><td>" + name + "</td><td>" + mima + "</td><td>" + youxiang + "</td><td>" + '<input type="button" value="删除">' + "</td></tr>";
        $("#table").append(tr);
        $(":button").click(function () {
          $(this).parent().parent().remove();
        });
      });
    });
  </script>
</head>
<body>
用户:<input id="yonghu" type="text">
密码:<input id="mima" type="password">
邮箱:<input id="youxiang" type="text">
<input type="submit" id="button" value="添加">
<table id="table" border="1ps">
  <tr>
    <td><input type="checkbox"></td>
    <td>用户名</td>
    <td>密码</td>
    <td>邮箱</td>
    <td>操作</td>
  </tr>
</table>
</body>
</html>

运行结果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现表单动态添加与删除数据操作示例的更多相关文章

  1. Jquery实现表单动态加减、ajax表单提交

    一直在搞Java后台开发,记得刚工作那一两年时间搞过前后端交互开发,用的东西也是五花八门,当时觉得做页面展示给别人看,是很有成就的事情,不过现在感觉自己跟纯前端开发比起来弱爆了,不过如果你的目标是作为 ...

  2. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  3. jquery 为表单动态添加元素

    $('<input />').attr('type','hidden')            .attr('name','type')            .attr('value', ...

  4. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. Angular-表单动态添加删除

    angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...

  6. 用 jQuery 实现表单验证（摘抄）

    ——选自<锋利的jQuery>(第2版)第5章的例题  5.1.5 表单验证 表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信 ...

  7. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  8. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. 用 jQuery 实现表单验证（转载）

    jQuery 官方 API 地址: http://api.jquery.com/ 在线引用 jQuery:http://code.jquery.com/ ——选自<锋利的jQuery>(第 ...

随机推荐

  1. python-1：正则表达式（基础知识点）

    1.简单匹配: \d  →匹配一个数字 \w →匹配一个数字或字母 \s  →匹配一个空格(包括tab等空白符) .    →匹配任意字符 *   →匹配任意个字符(包括0个) +  →匹配至少一个字 ...

  2. ArrayList扩容分析

    一段java代码 String e = "q3234v"; List<String> list = new ArrayList<String>(); for ...

  3. Redis windows服务器配置可远程连接

    Redis配置远程可访问:修改redis.conf或redis.windows-service.conf配置文件. 具体通过 1:将绑定的本机给注释掉,找到这行 bind 127.0.0.1,然后在前 ...

  4. vue 组件基本使用

    组件的基本使用 注册组件 注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置.vue.component()注册的全局组件 Vue.componen ...

  5. python 短信邮件

    短信邮件 hashlib​- md5:非对称加密,不可逆的,经常用于加密密码然后存储​- 示例:​ ```python import hashlib ​ # 创建hash对象,可以指定需要加密的字符串 ...

  6. IDEA打开光标是粗黑色，backspace键、insert键点击无效的解决办法

    问题描述:打开IDEA的编译器之后,界面显示的光标变粗,点击backspace键和insert键盘之后无效 解决方法:打开File——Settings——Plugins,在右侧的搜索栏中搜索IdeaV ...

  7. C# 封装返回类

    using System; using System.Collections.Generic; using System.Runtime.CompilerServices; using System. ...

  8. 阿里云--安装nginx AND访问超时

    首先先安装PCRE pcre-devel 和Zlib,因为配置nginx的时候会需要这两个东西PCRE(Perl Compatible Regular Expressions) 是一个Perl库,包括 ...

  9. SpringBoot项目多模块打包与部署【pom文件问题】

    [bean的pom] [user的pom] 特别注意,user模块因为有返回jsp页面和web相关,所以需要加入web依赖. chapter23 com.yuqiyu 1.0.0 4.0.0 com. ...

  10. ThinkPHP 模型方法 setInc() 和 setDec()

    TP 内置了对统计数据(数字字段)的更新方法: setInc():将数字字段值增加 setDec():将数字字段值减少 $User::where('id=5')->setInc('score', ...