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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

Liddyz   2020-05-16 我要评论

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们