当前位置:Gxlcms > JavaScript > 关于jQuery实现表单动态添加与删除数据的操作

关于jQuery实现表单动态添加与删除数据的操作

时间:2021-07-01 10:21:17 帮助过:14人阅读

这篇文章主要介绍了jQuery实现表单动态添加与删除数据操作,涉及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>

运行结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery阻止事件冒泡实例分析

jQuery实现的AJAX简单弹出层效果

以上就是关于jQuery实现表单动态添加与删除数据的操作的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行