jQuery实现表单动态添加与删除数据操作示例


Posted in jQuery onJuly 03, 2018

本文实例讲述了jQuery实现表单动态添加与删除数据操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户名注册</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <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程序设计有所帮助。

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
You might like
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python随机生成数模块random使用实例
2015/04/13 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
django框架自定义用户表操作示例
2018/08/07 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
解决Mac下使用python的坑
2019/08/13 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python基于template实现字符串替换
2020/11/27 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
介绍一下gcc特性
2015/10/31 面试题
求职信结尾怎么写
2014/05/26 职场文书
经济管理自荐书
2014/06/09 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
电气工程师岗位职责
2015/02/12 职场文书
员工辞职信范文
2015/03/02 职场文书
总经理司机岗位职责
2015/04/10 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
详解Redis基本命令与使用场景
2021/06/01 Redis