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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 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
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
angular分页指令操作
2017/01/09 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
python实现rest请求api示例
2014/04/22 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
小学假期安全广播稿
2014/09/28 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python