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>中添加元素:

$(‘#main‘).append(‘<p>added</P>‘);

删除元素:
第一种情况,删除mian下面的所有子集,但main保留住。

$(‘#main‘).empty();

第二种情况,删除main下面的所有子集,包括mian自己。

$(‘#main‘).remove();

原文地址:https://www.cnblogs.com/jlfw/p/12208249.html

时间: 2024-10-29 19:11:29

Jquery动态添加输入框的相关文章

jquey学习2之jquery动态添加页面片段

第一个方法:append()方法 [1]$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示. 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript&quo

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

jquery动态添加节点

<1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title&

Jquery 动态添加删除元素 用js添加的元素无法删除问题

用jquery方法的绑定侦听和销毁来解决动态div的增加删除: 正确代码: <script type="text/javascript" > $(document).ready(function(){  bindListener(); }) function addimg(){  $("#mdiv").append('<div ><input type="file" name="img[]" /&

给Jquery动态添加的元素添加事件

给Jquery动态添加的元素添加事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>        

jQuery动态添加input type=file文件上传域

jQuery动态添加input type=file文件上传域,当用户需要通过网页上传多个文件的时候,动态添加文件域就显得尤其重要,本功能引入了jQuery,兼容性方面也做的不错,暂时没有限制文件域的个数,所以你可以无限制的生成文件域,直到满足你的需要. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

jquery动态添加删除div--事件绑定,对象克隆

我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在phpchina问答区版主的热心帮助下解答了(答案在最后)        使用到的jquery方法和思想就是:事件的绑定和销毁(unbind),另外还可以使用clone,通过克隆可以很好的解决这个问题          相关描述如下 功能:点击增加,自动添加一个iptdiv 点击 iptdiv后的 X 自动删除当前div 问题:默认存在的(也就是页面加载进来的)的那个iptdiv 后的 X 点击有效,可以删除当前 iptdiv  但

jQuery动态添加的元素绑定事件处理函数代码

jQuery动态添加的元素绑定事件处理函数代码 作者: 字体:[增加 减小] 类型:转载 有一段时间没用jquery了,今天又碰到这个问题.当时是知道有livejquery可以解决.但是我并不喜欢为了这个而另外加载一个. 我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input'

jquery学习记录一:jquery动态添加html元素后设置其绑定事件

1. jquery动态添加html元素(例如:) <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="devices_div"> <ul> <li name="apple">apple</li> <li name="pea