jquery添加迭代到克隆

我有一个窗体有两个按钮，一个是输入新的空行输入文本框等待用户输入，另一个我希望用户能够复制他们刚刚输入的数据。我不希望数据被自动复制，我希望用户不得不点击按钮来复制/克隆信息。值的名称必须能够迭代，因为这些数据将被提交给每个使用mysql的数据库。jquery添加迭代到克隆

列出的代码被封装在一个php while循环中。

我想不出如何将迭代添加到jquery clone属性。另外，我只想要一行克隆一次。

这是我到目前为止。目前，如果我有2行克隆2行，4行然后4行克隆等。我只想要一次添加一行。显然没有迭代。

我非常新手，当涉及到jQuery，所以任何帮助表示赞赏。

更新：

我试图行号分配给每个行，只要“添加新行”同时克隆将努力增加点击。但是，如果添加新行被点击两次，那么两行将被复制。

<script> 
 
\t $("#button<?php echo $lineid; ?>").click(function(){ 
 
    var count = $("input").length + 1; 
 
    
 
    $("#part<?php echo $lineid; ?>").prepend("<div id=rowNumber"+count+"><input type='text' value='<?php echo $itemid; ?>' name='itemid[" + count + "]'><input type='text' name='qty[" + count + "]'><div>"); 
 
\t \t 
 
\t \t $("#buttonClone<?php echo $lineid; ?>").click(function(){ 
 
     $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>"); 
 
    }); 
 

 
}); \t 
 

 
</script>

<div style="margin: 10px 0px;"> 
 
<div style="font-size:1.2em;"> 
 
<?php echo $lineid.") ".$itemid; ?> 
 
</div> 
 

 
<button id="button<?php echo $lineid; ?>">Add new row</button> 
 
<button id="buttonClone<?php echo $lineid; ?>">Clone</button> 
 
<br> 
 

 

 

 
<form action='#' method='post'> 
 
\t <div id="part<?php echo $lineid; ?>"></div> 
 
    
 
    <input type="submit" value="submit"> 
 
</form>

更新II：

这是我想的代码是但是这里的问题是，每次DUP按钮被点击表格时被提交，而不是新线添加。我不明白如何给复制按钮一个唯一的ID，该ID匹配没有包含在form属性中的行添加的行的ID。

<script> 
 
\t $("#button<?php echo $lineid; ?>").click(function(){ 
 
    var count = $("input").length + 1; 
 
    
 
    $("#part<?php echo $lineid; ?>").prepend("<div id=rowNumber"+count+"><button id=buttonClone"+ count +">Dup</button><input type='text' value='<?php echo $itemid; ?>' name='itemid[" + count + "]'><input type='text' name='qty[" + count + "]'><div>"); 
 
\t \t 
 
\t \t $("#buttonClone<?php echo $lineid; ?>").click(function(){ 
 
     $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>"); 
 
    }); 
 

 
}); \t 
 

 
</script>

<div style="margin: 10px 0px;"> 
 
<div style="font-size:1.2em;"> 
 
<?php echo $lineid.") ".$itemid; ?> 
 
</div> 
 

 
<button id="button<?php echo $lineid; ?>">Add new row</button> 
 

 
<br> 
 

 

 

 
<form action='#' method='post'> 
 
\t <div id="part<?php echo $lineid; ?>"></div> 
 
    
 
    <input type="submit" value="submit"> 
 
</form>

更新三：

通过去除形式属性我能做到什么，我有例外想要同时使用克隆属性迭代到下一个值。

我不知道如何做到这一点。我在谷歌的某个地方看到过一篇文章，以某种方式使用了下一篇文章，但这远远超出了我的能力。

<script> 
 
\t $("#button<?php echo $lineid; ?>").click(function(){ 
 
    var count = $("input").length + 1; 
 
    
 
    $("#part<?php echo $lineid; ?>").prepend("<div id=rowNumber" + count + "><button id=buttonClone" + count + ">Dup</button><input type='text' value='<?php echo $itemid; ?>' name='itemid[" + count + "]'><input type='text' name='qty[" + count + "]'><div>"); 
 
\t \t 
 
\t \t $("#buttonClone"+count).click(function(){ 
 
     $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>"); 
 
    }); 
 

 
}); \t 
 

 
</script>

<div style="margin: 10px 0px;"> 
 
<div style="font-size:1.2em;"> 
 
<?php echo $lineid.") ".$itemid; ?> 
 
</div> 
 

 
<button id="button<?php echo $lineid; ?>">Add new row</button> 
 

 
<br> 
 

 

 

 

 
\t <div id="part<?php echo $lineid; ?>"></div> 
 
    
 
    <input type="submit" value="submit">

更新IV：

我明白 “变种计数= $（” 输入 “）。长度;”获取输入的长度，我明白在点击之外这么做，我想我明白我已经在点击内添加了迭代，我认为这是我现在所做的，但它仍然无法正常工作。克隆仍然没有选择增加的名称值。期望的结果的

<script> 
 
\t 
 
\t 
 
\t 
 
\t var count = $("input").length; 
 
\t 
 
\t $("#button<?php echo $lineid; ?>").click(function(){ 
 
\t \t 
 
\t var count = $("input[id^=buttonClone]").length +1; \t \t \t 
 
    
 
    $("#part<?php echo $lineid; ?>").prepend("<div id=rowNumber" + count + "><button id=buttonClone" + count + ">Dup</button><input id='buttonClone" + count + "' type='text' value='<?php echo $itemid; ?>' name='itemid[" + count + "]'><input type='text' name='qty[" + count + "]'><div>"); \t \t 
 
\t \t \t 
 
\t \t $("#buttonClone"+count).click(function(){ 
 
     $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>"); 
 
\t \t \t 
 
\t \t \t 
 
    }); \t 
 

 

 
}); \t \t 
 

 
</script>

<div style="margin: 10px 0px;"> 
 
<div style="font-size:1.2em;"> 
 
<?php echo $lineid.") ".$itemid; ?> 
 
</div> 
 

 
<button id="button<?php echo $lineid; ?>">Add new row</button> 
 

 
<br> 
 

 

 

 

 
\t <div id="part<?php echo $lineid; ?>"></div> 
 
    
 
    <input type="submit" value="submit">

实施例：

<button id="button1">Add new row</button> 
 
<br> 
 
<div id="part1"> 
 
<div id="rowNumber4"> 
 
\t <button id="buttonClone4">Dup</button> 
 
\t <input id="buttonClone4" type="text" value="" name="itemid[4]">//value added by using the add new button 
 
\t <input type="text" name="qty[4]"> 
 
</div> 
 
<div id="rowNumber5"> 
 
\t <button id="buttonClone5">Dup</button> 
 
\t <input id="buttonClone5" type="text" value="somevalueone" name="itemid[5]">//Dup button used values added from rowNumber3 - part1 
 
\t <input type="text" name="qty[5]"> 
 
</div> 
 
<div id="rowNumber3"> 
 
\t <button id="buttonClone3">Dup</button> 
 
\t <input id="buttonClone3" type="text" value="somevalueone" name="itemid[3]">//Dup button used values added from rowNumber1 - part1 
 
\t <input type="text" name="qty[3]"> 
 
</div> 
 
<div id="rowNumber2"> 
 
\t <button id="buttonClone2">Dup</button> 
 
\t <input id="buttonClone2" type="text" value="somevalueone" name="itemid[2]">//Dup button used values added from rowNumber1 - part1 
 
\t <input type="text" name="qty[2]"> 
 
</div> 
 
<div id="rowNumber1"> 
 
\t <button id="buttonClone1">Dup</button> 
 
\t <input id="buttonClone1" type="text" value="somevalueone" name="itemid[1]">//value added by using the add new button 
 
\t <input type="text" name="qty[1]"> 
 
</div> 
 
</div> 
 
<button id="button1">Add new row</button> 
 
<br> 
 
<div id="part2"> 
 
<div id="rowNumber2"> 
 
\t <button id="buttonClone2">Dup</button> 
 
\t <input id="buttonClone2" type="text" value="" name="itemid[2]">//value added by using the add new button 
 
\t <input type="text" name="qty[2]"> 
 
</div> 
 
<div id="rowNumber1"> 
 
\t <button id="buttonClone1">Dup</button> 
 
\t <input id="buttonClone1" type="text" value="somevalueone" name="itemid[1]">//value added by suing the add new button 
 
\t <input type="text" name="qty[1]"> 
 
</div> 
 
</div>

来源

2016-12-27 jlewis504

不''返回'.className'？ – guest271314

是的，它确实返回类名称 – jlewis504

您使用'.className'克隆所有元素。 – guest271314

为了避免重复documentid s调整动态创建<button>元件id至class，同时仍然将name属性的<input>元素设置为count变量。

click附加事件".buttonClone"<button>元素的父元素#part1，#buttonclick处理程序以外的范围。使用.each(),.replace()来替换数字name克隆元素input元素的属性值为$("#part2 > .rowNumber").length + 1。在委托的click事件处理程序中用.prependTo()代替.appendTo()。？

$("#button").click(function() { 
 

 
    var count = $("#part1 > .rowNumber").length + 1; 
 

 
    $("#part1") 
 
    .prepend(
 
    "<div class='rowNumber'>" 
 
    + "<button class='buttonClone'>Dup</button>" 
 
    + "<input class='buttonClone' type='text' " 
 
    + "value='' name='itemid[" + count + "]'>" 
 
    + "<input type='text' name='qty[" + count + "]'>" 
 
    + "</div>"); 
 

 
}); 
 

 
$("#part1").on("click", ".buttonClone", function() { 
 

 
    var count = $("#part2 > .rowNumber").length + 1; 
 
    var clone = $("#part1 > .rowNumber:last-child").clone(); 
 

 
    clone 
 
    .find("input") 
 
    .each(function(index, el) { 
 
    el.name = el.name.replace(/\d+/, count); 
 
    }) 
 
    .end() 
 
    .prependTo("#part2"); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<button id="button">click</button><br> 
 
part1<br> 
 
<div id="part1"></div><br/> 
 
part2<br/> 
 
<div id="part2"></div>

来源

2016-12-29 00:39:51 guest271314

这是我的头。但是，它仍然没有按预期运行。只有一个'点击'按钮。每个部分必须有自己的点击按钮。每个复制按钮都需要相对于唯一的部分。在你的例子中，第一部分中的任何dup都会被添加到第二部分中，而使用dup按钮重复的任何内容都不会执行任何操作。一切都在增加。一旦我得到这个没有PHP的工作是可行的，把它包在一个while循环？每个表格都会有一组不同的部分。 IE第1部分，第2部分第3部分等等。如果没有，那么我需要改变这里的逻辑。 – jlewis504

@ jlewis504应该点击''.value''“Dup”'将''追加到'＃partN'元素吗？ – guest271314

是的，这是正确的。 – jlewis504

jquery添加迭代到克隆

回答

相关问题