动态生成文本框并获取数据

首先来描述一下业务需求：如图所示，当点击‘增加登录参数’按钮，会动态生成参数文本框，并能获取到数据

一、动态生成文本框

1、页面代码

        <%--Content  用来新增文本框 --%>
  <div style="" id="Content">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;color: #555;">登录参数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="paramName" required lay-verify="required"
                               placeholder="请输入参数名如：username" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="">
                        <input type="text" name="paramValue" required lay-verify="required" placeholder="请输入参数值如：abc"
                               autocomplete="off" class="layui-input">
                    </div>
    </div>
    <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 120px;color: #555;"></label>
                    <div class="layui-input-inline">
                        <a type="button" id="add" onclick="addParam()"  autocomplete="off"
                           class="layui-input"
                           style="color: #0000FF;text-decoration:underline;line-height: 30px">增加登录参数</a>
                    </div>
    </div>
    

页面主要是通过一个div包含组件内容，通过一个点击按钮，触发文本框添加 addParam() 事件。
另外，我使用的是layui框架，得导入对应的css和js

      <link rel="stylesheet" href="/assets/layuiadmin/layui/css/layui.css" media="all">
      <script src="/js/jquery-1.8.3.min.js"></script>
      <script src="/assets/assets/layui.all.js"></script>

2、js代码

//动态添加文本框
    function addParam() {

        $("#Content").append('<div class="layui-form-item">\n' +
            '                    <label class="layui-form-label" style="width: 120px;color: #555;"></label>\n' +
            '                    <div class="layui-input-inline">\n' +
            '                        <input type="text"  name="paramName" required lay-verify="required"\n' +
            '                               placeholder="请输入参数名如：username"  autocomplete="off" class="layui-input">\n' +
            '                    </div>\n' +
            '                    <div class="layui-input-inline">\n' +
            '                        <input type="text"  name="paramValue" required lay-verify="required"  placeholder="请输入参数值如：abc"\n' +
            '                               autocomplete="off" class="layui-input"> \n' +
            '                    </div>\n    ' +
            '                    <div class="layui-input-inline" style="width: 30px">\n' +
            '                        <a type="button" onclick="delDevelopmentNumber(this)" style="display: inline-block"><i class="layui-icon" style="width: 18px;height: 18px;text-align: center;line-height: 26px">&#xe640;</i></a>\n' +
            '                    </div>\n' +
            '                </div>');
    }

    //移除文本框
    function delDevelopmentNumber(e) {

        //console.info(e);

       // console.info($(e).parent().parent());

        $(e).parent().parent().remove();

    }

    // 获取输入参数数据
    function getParam(){
        var paramName=[];
        var paramValue=[];
        var paramlist=[];
// 获取name为paramName输入框的值，并存入paramName
    $("#Content input[name='paramName']").each(function () {

        // console.log(this.value);
       paramName.push(this.value);
    });
    // 获取name为paramValue输入框的值，并存入paramValue
        $("#Content input[name='paramValue']").each(function () {

            // console.log(this.value);
            paramValue.push(this.value);
        });

        for(var i=0;i<paramName.length;i++){
            var param={};//创建 param json对象
            param.name=paramName[i];
            param.value=paramValue[i];
            paramlist[i]=param;
        }
    //控制台输出获取值
            console.log(paramlist)
    }

</script>

3.页面实现效果
下面是实现的页面显示图

通过点击【增加登录参数】，动态生成文本框。如下所示

获取参数数据：

本熊第一次写博客，希望能对大家有所帮助。哈哈。