首先來描述一下業務需求：如圖所示，當點選‘增加登入引數’按鈕，會動態生成引數文字框，並能獲取到資料

一、動態生成文字框

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.頁面實現效果
下面是實現的頁面顯示圖

通過點選【增加登入引數】，動態生成文字框。如下所示

獲取引數資料：

本熊第一次寫部落格，希望能對大家有所幫助。哈哈。