时间戳

首页 > 解决方案 > jQuery - Can't clone nested row inside form

javascript - jQuery - Can't clone nested row inside form

问题描述

Similar to this question, I have a form and want to use clone() and remove() to dynamically change the fields visible to the user. The user has two controls: + and - to add or remove rows, respectively.

My problem is slightly different, however, because I want to enable cloning for each of the nested rows inside a form, independent of one another. The usage is to allow a user to specify one or more time intervals (e.g. 9AM to 5PM on each day). In other words, a user should be able to add as many time intervals as they want, but clicking the + or - under Monday would only affect the row of fields inside Monday - not affect other days.

Screenshots

  1. Form - Initial State
  2. Form - How it Should Look (when a user adds a row under each day)

I was able to get it where clicking the + or - duplicates the entire row (including the checkbox) - which is not what I want: https://jsfiddle.net/9jpraney/

I know the From and To fields need to be inside a parent div and this parent div is the one that should get cloned. However, when I make this change, it doesn't clone at all.

Here's my latest attempt: 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>

I'm totally stuck here, not sure why it works on the whole row but not part of it. I suspect it has something to do with the use of parent(), but not sure. Any insight is MUCH appreciated!

标签： javascriptjqueryhtml

解决方案

请参阅此以获取工作代码

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);

推荐阅读