首先来描述一下业务需求:如图所示,当点击‘增加登录参数’按钮,会动态生成参数文本框,并能获取到数据
一、动态生成文本框
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"></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.页面实现效果
下面是实现的页面显示图
通过点击【增加登录参数】,动态生成文本框。如下所示
获取参数数据:
本熊第一次写博客,希望能对大家有所帮助。哈哈。