动态的添加、删除表单

最新推荐文章于 2025-06-26 08:50:51 发布

J_小浩子

最新推荐文章于 2025-06-26 08:50:51 发布

阅读量6.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java bootstrap jquery 文章标签： bootstrap jquery 动态添加表单动态删除表单 java

本文链接：https://blog.youkuaiyun.com/change_on/article/details/70145726

java 同时被 3 个专栏收录

97 篇文章

订阅专栏

bootstrap

3 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

在写简历时，有一项实习经历，如果没有就不填，如果有就实习经历，有多少写多少。
这个功能是如何实现的，其实很简单，以bootstrap和jquery为例：

这里写图片描述

具体代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="row" style="margin-top: 10%">
            <div class="col-md-4 col-md-offset-4">
                <!--动态增加的内容都添加在id="formpart"的div后面-->
                <div id="formpart"></div><br><br>
                <button class="btn btn-primary" id="addform">添加实习经历</button>
            </div>
       </div><!--/.row-->
    </body>
    <script>
        $("#addform").click(function(){
            //添加的内容
            var addform = '<div id="addformbody"><form role="form"><div class="form-group">' +
               '<label for="name">实习公司名称</label>' +
               '<input type="text" class="form-control" placeholder="实习公司名称" required></div>'+
               '<div class="form-group">' +
               '<label for="name">实习经历</label>' +
               '<textarea class="form-control" rows="3" required></textarea></div>'+
               '<div class="row"><div class="col-md-4"><button type="submit" class="btn btn-primary" >提交实习经历</button>'+
               '</div><div class="col-md-4 col-md-offset-4"><button type="button" class="btn btn-primary" id="removeform">'+
               '删除实习经历</button></div></div></form></div>';
            $("#formpart").after($(addform));
            //删除表单
            $("#removeform").click(function(){
               $("#addformbody").remove();
            });
        });
    </script>
</html>