Question

我有一个带有HTML表的表单，该表有一个按钮(#addRows)，单击该按钮将克隆第一个表行并将其附加到表的底部。

此表位于HTML的一部分，其中包含一些其他输入字段，这些字段也可以克隆并附加到表单的底部。当我克隆该部分时，我正在更改所有子元素ID，以包含一个可以迭代的数字，具体取决于用户克隆该部分的次数。

示例

<div id="someID"> ... </div>
<div id="someID2"> ... </div>
<div id="someID3"> ... </div>

我正在使用JQuery这样做

$(function() {    
  var $section = $("#facility_section_info").clone();
  var $cloneID = 1; 
    $( ".addSection" ).click(function() { 
        var $sectionClone = $section.clone(true).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + $cloneID); });
        $('#facility_section_info').append($sectionClone);
        $cloneID++; 
    });
});

当我克隆包含表格的部分时，我也克隆了#addRows按钮，当点击该按钮时，应该将表格行追加到正在被点击的表格中。但是，如果我克隆我的部分并单击我的第二个`#addRows按钮，它将克隆我的表行，但它将附加到我的第一个表而不是第二个表。

这是我的addRows按钮和事件处理程序

<input type="button" value="+" id="addRows" class="addRows"/>

$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone();
        $idVal = 1;
        $(document).on('click', '.addRows', function(){
            var copy = $firstTRCopy.clone(true);
            var newId = 'row' +$idVal;
            copy.attr('id', newId);
            $idVal += 1;
            copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>");
            $componentTB.append(copy);
        });
});

我的问题是，当我克隆包含我的表格和#addButton的HTML部分时，如何确保当用户点击原始按钮时，它将克隆并附加到该表或< / strong>如果我单击克隆按钮，它将克隆并仅附加到克隆表中？

如果有什么不清楚请告诉我，所以我可以尝试更好地解释我想要做什么，谢谢。

这是一个JSFiddle，展示了我遇到的问题。

Answer 1

因为我真的爱你BigRabbit，所以我在这里。您将在此处看到至少一个有用的修复：

    var $sectionClone = $section.clone(true);
    $sectionClone.find("*[id]").andSelf().each(function () {
        $(this).attr("id", $(this).attr("id") + $cloneID);
    });

并修复了您尚未报告的问题

$copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');

使用

$("#facility_section_info").on('click', '.remove', function (e) {
    e.preventDefault();
    $("#"+$(this).data("removeid")).remove();
});

FIDDLE

$(function () {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone(),
        $section = $("#facility_section_info>fieldset").clone(),
        $cloneID = 0,
        $idVal = 0;

    $("#facility_section_info").on('click', '.remove', function (e) {
        e.preventDefault();
        $("#"+$(this).data("removeid")).remove();
    });

    $("#facility_section_info").on('click', '.addRows', function () {
        $idVal++;
        var $copy = $firstTRCopy.clone(true);
        var newId = 'row' + $idVal;
        $copy.attr('id', newId);
        $copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');
        $(this).closest("fieldset").find("tbody").append($copy);
    });

    $("#facility_section_info").on("click", ".addSection", function () {
        $cloneID++;
        var $sectionClone = $section.clone(true);
        $sectionClone.find("*[id]").andSelf().each(function () {
            $(this).attr("id", $(this).attr("id") + $cloneID);
        });
        $('#facility_section_info').append($sectionClone);

    });
});

将元素附加到克隆元素

1 个答案: