• html 克隆页面上的内容,实现增删执行步骤的功能


    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=" 120px">
              <span class="x-red">*</span>执行任务类型
          </label>
          <div class="layui-input-inline" style=" 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=" 120px">
              <span class="x-red">*</span>传递脚本参数
          </label>
          <div class="layui-input-inline" style=" 380px;">
              <input class="layui-input" id="script_parameter" name="script_parameter" placeholder="参数1 参数2 ...">
          </div>
          <div class="layui-form-mid layui-word-aux" style=" 450px">
              <span style="color: firebrick">【注意】多个参数用空格隔开,脚本不需要传递参数则默认为空即可</span>
          </div>
        </div>
        <input class="layui-btn" style=" 100px;background-color: #08a294" value="添加步骤" onclick="add_fs(this)"/>
        <input class="layui-btn" style=" 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>
  • 相关阅读:
    统计一段文字中出现频率最高的10个单词(c语言)
    java之过滤器Filter (应用场景)
    java之过滤器Filter
    Spring AOP
    清华大学iCenter区块链公开课 第二节
    学习区块链 第一节 精通比特币
    使用Shiro登录成功后,跳转到之前访问的页面实现
    windows下系统移植到linux下出现的问题
    mysql分页查询
    安卓开发随笔
  • 原文地址:https://www.cnblogs.com/chenjw-note/p/12929767.html
Copyright © 2020-2023  润新知