1.前端html代码编写
<fieldset class="layui-elem-field" style="background-color: #69BD69"> <div class="layui-form-item" style="margin-top: 17px;"> <label for="execution_script_type" class="layui-form-label" style="width: 120px"> <span class="x-red">*</span>执行任务类型 </label> <div class="layui-input-inline" style="width: 380px;"> <select id="execution_script_type" name="execution_script_type" style="height: 38px;"> {% for execution_script_type in script_type_list %} <option value="{{ execution_script_type.script_name }}">{{ execution_script_type.script_name }}</option> {% endfor %} </select> </div> </div> <div class="layui-form-item"> <label for="script_parameter" class="layui-form-label" style="width: 120px"> <span class="x-red">*</span>传递脚本参数 </label> <div class="layui-input-inline" style="width: 380px;"> <input class="layui-input" id="script_parameter" name="script_parameter" placeholder="参数1 参数2 ..."> </div> <div class="layui-form-mid layui-word-aux" style="width: 450px"> <span style="color: firebrick">【注意】多个参数用空格隔开,脚本不需要传递参数则默认为空即可</span> </div> </div> <input class="layui-btn" style="width: 100px;background-color: #08a294" value="添加步骤" onclick="add_fs(this)"/> <input class="layui-btn" style="width: 100px;background-color: #c38e32" value="删除步骤" onclick="del_fs(this)"/> </fieldset>
2.javascript代码编写
<script> //添加步骤 function add_fs(obj) { var fieldset = $(obj).parent(); fieldset.after(fieldset.clone()); } //删除步骤 function del_fs(obj) { $(obj).parent().remove(); } </script>