Question

是否可以将以下两个功能结合起来，同时保持它们分开？

cloneMe函数克隆一组字段并为它们提供新的名称和ID，因此使用foreach我可以将每个组作为单独的行放入db。

addRow函数将2个字段（'Bracing'和'Qty'）添加到克隆组，可以添加无限量的这些字段，但需要将它们视为克隆组的一部分由cloneMe生成，所以我可以将这两个字段放入它们自己的独立数据库表中。

到目前为止，我尝试将addRow生成的字段视为cloneMe组的一部分，导致addRow字段被视为空，仅第一组是第一组的一部分，无法向第二组或超出组添加任何内容。

我已将所有内容都放入jsFiddle中：http://jsfiddle.net/AnJzU/虽然addRow似乎不想在那里工作。

cloneMe功能;

$(document).ready(function() {
    var newNum = 2;
    cloneMe = function(el) {
        var newElem = el.clone().attr('id', 'container' + newNum);
        newElem.html(newElem.html().replace(/form\[1\]/g, 'form['+newNum+']'));
        newElem.html(newElem.html().replace(/id="(.*?)"/g, 'id="1'+newNum+'"'));
        $('#cloneb').before(newElem);
        newElem.find('.delete_name').html('<p class="rem_field"><a href="#"><span>X</span></a></p>');
        newNum++;
    };

    $(document).on('click', '.rem_field', function() {
        $(this).closest('.instance').remove();
        return false;
    });    

});

addRow功能;

var rowNum = 0;
function addRow(frm) {
   rowNum ++;
   var row = '<span id="rowNum'+rowNum+'"><table cellpadding="0" cellspacing="0" border="0"><tr><td><label for="test">Bracing:</label><input type="text" name="form['+rowNum+'][brac]['+rowNum+'][bracing]" size="4" class="brac" value=""></td><td><label for="test2">Qty:</label><input type="text" name="form['+rowNum+'][brac]['+rowNum+'][qty]" class="qty" value=""></td><td><input type="button" class="rem" value="X" onclick="removeRow('+rowNum+');"></td></tr></table></span>';
   jQuery('#itemRows').append(row);
}

function removeRow(rnum) {
  jQuery('#rowNum'+rnum).remove();
}

Answer 1

您的cloneMe代码始终使用ID“container1”克隆隐藏的表单模板。如果您希望在添加额外支撑和数量行后克隆表单，则需要将正确的元素传递给cloneMe函数。由于第一个容器的id为“container”而不是“container1”，因此您的cloneMe调用需要：

cloneMe($('#container'))

当然，这不是动态的。这将始终克隆顶部容器。如果你想要在列表中克隆最新的容器，这就是你想要的，你需要你的“更多细节”按钮更加动态，如下所示：

<input type="button" id="cloneb" value="More Details" onclick="cloneMe($('#container' + (newNum - 1)));" />

这将始终克隆当前newNum变量之前的数字。你可能应该取消你的“container1”隐藏模板，只需调用你的第一个容器“container1”。否则，onclick更改将无法工作，因为它仍将克隆您的隐藏容器，而不是您添加新行的第一个容器。

将两个功能组合在一起运行

1 个答案: