当前位置:主页 > jquery教程 > jQuery实现表单动态添加与删除数据操作示例

jQuery实现表单动态添加与删除数据的实例分享

发布:2020-02-12 08:50:16 116


给网友朋友们带来一篇jQuery相关的编程文章,网友侯从阳根据主题投稿了本篇教程内容,涉及到jQuery、表单、动态添加、动态删除、数据、jQuery实现表单动态添加与删除数据操作示例相关内容,已被632网友关注,相关难点技巧可以阅读下方的电子资料。

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

本文实例讲述了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程序设计有所帮助。


参考资料

相关文章

  • ThinkPHP5.1表单令牌Token失效的解决方法

    发布:2019-07-31

    这篇文章主要给大家介绍了关于ThinkPHP5.1表单令牌Token失效问题的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用ThinkPHP具有一定的参考学习价值,需要的朋友们下面来一起学


  • jquery+thinkphp实现跨抓取数据的方法

    发布:2019-06-06

    这篇文章主要介绍了jquery+thinkphp实现跨域抓取数据的方法,结合实例形式分析了thinkPHP结合jQuery的ajax实现跨域抓取数据的相关操作技巧,需要的朋友可以参考下


  • jQuery获取当前点击的对象元素的方法

    发布:2020-07-03

    下面小编就为大家带来一篇jQuery获取当前点击的对象元素(实现代码)。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧


  • 如何解决jQuery中 $ 符号的冲突问题

    发布:2020-02-16

    在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码。这篇文章给大家分享jQuery中 $ 符号的冲突问题及解决方案,感兴趣的朋友一起看看吧


  • jQuery动态创建html元素的实例代码和方法

    发布:2019-11-23

    这篇文章主要介绍了jQuery动态创建html元素的常用方法,包括jQuery追加元素、遍历数组以及使用模板等方法,非常具有实用价值,需要的朋友可以参考下


  • jQuery复合事件的使用

    发布:2020-02-12

    这篇文章主要介绍了jQuery复合事件用法,结合具体实例形式分析了jQuery复合事件的简单定义与使用方法,需要的朋友可以参考下


  • 对之前写的jquery分页做下升级

    发布:2023-01-10

    给大家整理了关于jquery的教程,之前写的分页,操作时要把传的参数放到隐藏hidden中,比较麻烦,下面重新包装了一下,需要的朋友可以参考参考


  • 如何用jQuery实现页面元素置顶时悬浮效果

    发布:2020-01-27

    这篇文章主要介绍了jQuery简单实现页面元素置顶时悬浮效果的方法,涉及jQuery针对页面元素样式的动态操作技巧,需要的朋友可以参考下


网友讨论