Jquery动态添加输入框

LingPF

2019-06-25

jquery 动态添加输入框的两种方法。

Jquery动态添加输入框

1.展示页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>动态添加输入框</title>

    <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <h1>动态添加输入框</h1>
    <div class="container">
          <h2>第一种组件封装</h2>
        <div class="input-group-add">
        </div>

        <h2>第二种简单的实现方式</h2>
        <div class="input-dyna-add">

        </div>
        <input type="button" onclick="addInput()" value="添加"/>
        <input type="button" onclick="getValue()" value="获取值"/>
    </div>

     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="add.js"></script>
    <script>
        $(function() {
            $('.input-group-add').initInputGroup({
                'widget' : 'input', //输入框组中间的空间类型
                /*
                'add' : '添加',
                'del' : '删除',
                */
                'field': 'data',
                'data' : ['250', '300', 'hi', 'dj']
            });

           
        });
                 function addInput()
                {
                    var input = $(" <div class='input-group form-inline'><input type='text' class='form-control' style='width:50%;margin-bottom:2px;' name='desc[]' placeholder='请输入名字'> <input type='text' name='price[]'  class='form-control' style='width:30%;margin-bottom:2px;'>&nbsp;&nbsp;&nbsp;&nbsp;<button class='removeclass btn btn-default' type='button'><span class='glyphicon glyphicon-minus'></span></button></div>'");


                    // append 表示添加在标签内， appendTo 表示添加在元素外尾

                    $(".input-dyna-add").append(input);

                }

                function getValue() {
                    var valArr = new Array;
                     $("input[name='desc[]']").each(function(index, item){
                        valArr[index] = $(this).val();

                          var priv = valArr.join(',');
                          alert(priv);

                       });

                    // console.log(desc);
                }

                $("body").on("click",".removeclass", function(e){  
   
                 // remove text box  
                 $(this).parent('div').remove(); 
            
                 return false;  
                })   

    </script>
</body>
</html>

二、js方法

add.js

/**
 * Created by DreamBoy on 2016/6/4.
 */
$(function() {
    $.fn.initInputGroup = function (options) {
        //1.Settings 初始化设置
        var c = $.extend({
            widget: 'input',
            add: "<span class=\"glyphicon glyphicon-plus\"></span>",
            del: "<span class=\"glyphicon glyphicon-minus\"></span>",
            field: '',
            data: []
        }, options);



        var _this = $(this);

        //添加序号为1的输入框组
        addInputGroup(1);

        /**
         * 添加序号为order的输入框组
         * @param order 输入框组的序号
         * @param data 初始化输入框组中的数据
         */
        function addInputGroup(order) {

            //1.创建输入框组
            var inputGroup = $("<div class='input-group'  style='width:60%;' style='margin: 10px 0'></div>");

            //2.输入框组的序号
            var inputGroupAddon1 = $("<span class='input-group-addon'></span>");

            //3.设置输入框组的序号
            inputGroupAddon1.html(" " + order + " ");

            //4.创建输入框组中的输入控件（input或textarea）
            var widget = '', inputGroupAddon2;
            if(c.widget == 'textarea') {
                widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");
                widget.html(c.data[order - 1]);
                inputGroupAddon2 = $("<span class='input-group-addon'></span>");
            } else if(c.widget == 'input') {
                widget = $(" <input type='text' class='form-control'  style='width:40%;margin-bottom:2px;' placeholder='请输入名字'> <input class='form-control' style='width:20%;margin-bottom:2px;' type='text'/>");
                widget.val(c.data[order - 1]);
                inputGroupAddon2 = $("<span class='input-group-btn' style='left:20px;'></span>");
            }

            //5.设置表单提交时的字段名
            if(c.field.length == 0) {
                widget.prop('name', c.widget + 'Data[]');
            } else {
                widget.prop('name', c.field + '[]');
            }


            //6.创建输入框组中最后面的操作按钮
            var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
            addBtn.appendTo(inputGroupAddon2).on('click', function() {
                //7.响应删除和添加操作按钮事件
                if($(this).html() == c.del) {
                    $(this).parents('.input-group').remove();
                } else if($(this).html() == c.add) {
                    $(this).html(c.del);
                    addInputGroup(order+1);
                }
                //8.重新排序输入框组的序号
                resort();
            });

            inputGroup.append().append(widget).append(inputGroupAddon2);

            _this.append(inputGroup);

            if(order + 1 > c.data.length) {
                return;
            }
            addBtn.trigger('click');
        }

        function resort() {
            var child = _this.children();
            $.each(child, function(i) {
                $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
            });
        }
    }
});

相关知识汇总：

我用jquery开发我们前端时，我们用js添加和删除元素是不可避免的。
我总结了一点用jquery添加和删除元素。
添加元素：
例如你需要在<div id="main"></div>中添加元素：