zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    设计模式
    C++下char/string跟int型转换比较
    function
    流程控制
    运算符
    type
    language
    phpbasic
    html标签集合
    课题六
  • 原文地址:https://www.cnblogs.com/chenjw-note/p/12929767.html
Copyright © 2011-2022 走看看