javascript - jQuery - 无法克隆表单内的嵌套行-6ren

javascript - jQuery - 无法克隆表单内的嵌套行

转载作者：行者123 更新时间：2023-12-01 08:33:15

类似于this问题，我有一个表格并想使用 clone()和remove()动态更改用户可见的字段。用户有两个控件:+和-分别添加或删除行。

但是，我的问题略有不同，因为我希望为表单内的每个嵌套行启用克隆，并且彼此独立。其用法是允许用户指定一个或多个时间间隔(例如每天 9AM 到 5PM)。换句话说，用户应该能够添加任意数量的时间间隔，但单击 +或-星期一下只会影响 Monday 内的字段行- 不影响其他日子。

屏幕截图

我可以通过点击 + 来获取它。或-复制整行(包括复选框) - 这不是我想要的: https://jsfiddle.net/9jpraney/

我知道From和To字段需要位于父级 div 内和这位家长div是应该被克隆的那个。但是，当我进行此更改时，它根本不会克隆。

这是我的最新尝试: https://jsfiddle.net/znxj5Lrs/

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".time-interval").length;

function clone(){
    $(this).parents(".time-interval").clone()
        .appendTo("body")
        .attr("id", "time-interval" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', '.add-interval', clone)
        .on('click', '.remove-interval', remove);
    cloneIndex++;
}
function remove(){
    $(this).parents(".time-interval").remove();
}
$(".add-interval").on("click", clone);

$(".remove-interval").on("click", remove);

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.btn-alt-success {
    color: #5c852c;
    background-color: #ebf5df;
    border-color: #ebf5df;
}

.btn-alt-danger {
    color: #af1310;
    background-color: #fae9e8;
    border-color: #fae9e8;
}

.actions > a {
    cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
    <label class="col-3">Days <span class="text-danger">*</span></label>
    <label class="col-9">Times</label>
</div>
<div class="form-group row">
    <!--<label class="col-lg-2 col-form-label mt-10">Step</label>-->

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="monday" name="days[]" value="monday">
            <label class="custom-control-label" for="monday">Monday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[monday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[monday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="tuesday" name="days[]" value="tuesday">
            <label class="custom-control-label" for="tuesday">Tuesday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[tuesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[tuesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="wednesday" name="days[]" value="wednesday">
            <label class="custom-control-label" for="wednesday">Wednesday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[wednesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[wednesday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>

    <div class="col-lg-3">
        <div class="custom-control custom-checkbox mb-20">
            <input class="custom-control-input" type="checkbox" id="thursday" name="days[]" value="thursday">
            <label class="custom-control-label" for="thursday">Thursday</label>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="row time-interval">
            <div class="col-lg-5">
                <select class="form-control form-control-lg" name="from_hours[thursday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9" selected> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17"> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
            <div class="col-lg-2">
                <span class="pl-15">to</span>
            </div>
            <div class="col-lg-5">
                <select class="form-control form-control-lg mb-30" name="to_hours[thursday][]">

                    <option value="0">12 AM</option>

                    <option value="1"> 1 AM</option>

                    <option value="2"> 2 AM</option>

                    <option value="3"> 3 AM</option>

                    <option value="4"> 4 AM</option>

                    <option value="5"> 5 AM</option>

                    <option value="6"> 6 AM</option>

                    <option value="7"> 7 AM</option>

                    <option value="8"> 8 AM</option>

                    <option value="9"> 9 AM</option>

                    <option value="10">10 AM</option>

                    <option value="11">11 AM</option>

                    <option value="12">12 PM</option>

                    <option value="13"> 1 PM</option>

                    <option value="14"> 2 PM</option>

                    <option value="15"> 3 PM</option>

                    <option value="16"> 4 PM</option>

                    <option value="17" selected> 5 PM</option>

                    <option value="18"> 6 PM</option>

                    <option value="19"> 7 PM</option>

                    <option value="20"> 8 PM</option>

                    <option value="21"> 9 PM</option>

                    <option value="22">10 PM</option>

                    <option value="23">11 PM</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-lg-4 actions">
        <a class="btn btn-alt-success add-interval">+</a>
        <a class="btn btn-alt-danger remove-interval">-</a>
    </div>



</div>

我完全被困在这里，不知道为什么它适用于整行而不是其中的一部分。我怀疑这与parent()的使用有关。，但不确定。非常感谢任何见解!

最佳答案

请参阅此工作代码

https://jsfiddle.net/p9Loj8kc/1 ,

您查找 .time-interval 的方式是错误的。

下面是js中的代码改动

js:

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".time-interval").length;
function clone(){
var $closestTimeInterval = $(this).closest(".actions").siblings(".time-interval").first();
    $closestTimeInterval.clone()
        .insertAfter($closestTimeInterval).attr("id", "time-interval" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        });
    cloneIndex++;
}
function remove(){
    $(this).parents(".time-interval").remove();
}
$(".add-interval").on("click", clone);

$(".remove-interval").on("click", remove);

关于javascript - jQuery - 无法克隆表单内的嵌套行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59847290/

文章推荐： Django - clean_field() 没有被调用来更新管理内联表单

文章推荐： jsp - 在 Struts 2 中每个页面的标题上显示用户名

文章推荐： r - 为什么R将大数视为偶数

文章推荐： jquery - 轮询、Ajax 和状态回调

Jquery可拖动位置-克隆
我有 jquery Draggable/droppable 来处理包含和帮助器选项集。我想做的是将放置的项目的顶部和左侧参数存储在两个变量中。我在下面的示例中实现了这一点(将新文档图标拖到框中)，但
Jquery动态添加下拉菜单(克隆)
我有一个带有两个链接下拉列表的表单，我需要制作许多克隆，但保留链接。这是一个示例，链接组合在我的应用程序中带有 json。链式代码:
jQuery 克隆 |
我在使用少量 jQuery 时遇到了一些逻辑问题。我很确定我需要一个循环设置，但我很难将其组合在一起。我引用了 tuts、视频、工作示例、幻灯片，甚至是原始 javascript，但仍然难以将逻辑端
PHP 克隆 child
我有一个对象，它是一个基本的树。我需要对其进行深度复制，并发现自己实现了 __clone 方法。成功的代码是: function __clone() { $object = new Custo
没有内容的文本框的 Jquery 克隆
我可以克隆一个没有内容的文本框吗？意味着如果我在克隆后在文本框中输入一些值，我想要一个空文本框。这可能吗？或者jquery克隆将其返回为innerHtml？最佳答案默认情况下，克隆会复制的值目
iPhone:复制/克隆
我想复制或克隆我自己编写的类的对象。但如果我调用复制函数，则仅复制指针。因此，如果我更改复制的对象，原始对象也会更改。有没有一种方法/功能可以真正克隆一个对象？最诚挚的问候梅兰妮最佳答案如果一
Javascript - 克隆、附加和包装
我有一些 javascripc 代码: $(this).parent().siblings().find('.year-dropdown').find('.date, .time, .details'
来自分支的 Mercurial 克隆
我们有一个包含三个命名分支的存储库，我想克隆其中一个分支。有一个善变的命令可以做到这一点吗？如果我使用 hg clone 提供(分支)路径，则会收到 404 错误。最佳答案 hg clone htt
c# - 克隆 ObservableCollection
我有带有 ObservableCollection 和其他属性的类。所以它看起来有点像这样: public class A { public int Id { get; set; } ..
没有历史的 Mercurial 克隆
我正在尝试下载一个大型开源项目的源代码，以便我可以查看它。它说要做: hg clone http://server/path 但是，这需要很长时间(我假设是因为这是一个大项目)。我并不真正关心变更集
prolog - 克隆、复制序言列表
我发现这段代码随处可见，用于复制列表或克隆列表。代码随处可见: clone([],[]). clone([H|T],[H|Z]):- clone(T,Z). ?-clone([1,2,3],Z).
java - 克隆 JFrame
我正在打印一个JFrame。在此之前，我隐藏菜单栏并将 JFrame 设置为未修饰。这工作得很好，但可见的 JFrame 发生了变化，以反射(reflect)我稍后必须恢复的已删除的控件。我想克隆
jQuery 克隆/追加创建多个重复项
我正在尝试复制一个 div 并将其附加到它的克隆之上。不幸的是，它似乎正在创建额外的重复项。这是怎么回事？这是一个示例:http://jsfiddle.net/QEN5N/ 最佳答案 live 会将
java - 克隆 ConcurrentHashMap
为什么我不能克隆 ConcurrentHashMap ? ConcurrentHashMap test = new ConcurrentHashMap(); test.put("hello",
jquery - 克隆()不工作互联网浏览器8
我有这个代码: openPopup.hide(); var substr = popupId.split('-'); var clone = $("#po
jquery 克隆。单击事件不会在新创建的克隆行上触发
这段代码几乎可以正常工作假设我的表中有 10 行，我单击顶行，它会被克隆，然后添加到表的底部，而原始数据被删除，重复这些步骤 5 次。现在，我以克隆在底部的五行结束。现在，如果我单击第一个克隆行，它
JQuery Select2 克隆
我已经设置了JSFiddle来展示我的问题。我改变了克隆方式，使其更加通用，因此我不需要为不同的表重用代码。通常，对于 select2 元素，我会这样做 $(".campaignType", $tr
带有简单换行符的 jQuery 克隆
1 2 3 $('#things').after($('#things').clone()); 克隆时如何在这两个元素之间插入中断？有没有一种巧妙的方法可以用一行代码来完成
c# - 克隆/复制获取访问器主体到新类型
我正在从现有类型动态装配中创建新类型，但只包含选定的属性: public class EmitTest { public Type Create(Type prototype, Type dy
C# 克隆——使用不可序列化的数据类型
在我的游戏引擎中实现对象克隆的过程中，我遇到了一些绊脚石。我的目标是拥有一个克隆系统，我不必逐个类地维护它，除非该类需要特殊处理。我的游戏引擎的设置围绕着一个基类 Object2D，它包含一些 Te

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery - 无法克隆表单内的嵌套行