将两个功能组合在一起单独使用时

Question

将以下两个功能组合在一起时，可以将它们分开吗？

cloneMe函数克隆一组字段，并给它们新的名称和ID，所以使用foreach我可以让每个组作为一个单独的行放入数据库。

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“container1”你cloneMe通话将需要：

cloneMe($('#container')) 

当然，这不是动态的。这将始终克隆顶部容器。如果你想克隆列表，最新的容器，就是好像你打算，你需要你的“更多”按钮是像这样的东西更动态：

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

这永远会克隆当前newNum变量之前的数字。您应该废除您的“container1”隐藏模板，只需调用您的第一个容器“container1”即可。否则，onclick更改将不起作用，因为它仍然会克隆隐藏的容器，而不是您添加新行的第一个容器。