jquery 添加迭代来克隆

Question

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

列出的代码包含在 php while 循环中。

我不知道如何向 jquery 克隆属性添加迭代。此外，我只想一次克隆一行。

这就是我到目前为止所拥有的。目前，如果我有 2 行，则克隆 2 行，如果有 4 行，则克隆 4 行，等等。我只想一次添加一行。而且显然没有迭代。

对于 jquery 我是个新手，所以非常感谢您的帮助。

更新:

我尝试为每一行分配一个行号，只要一次单击一次添加“添加新行”，克隆就会起作用。但是，如果单击“添加新行”两次，则会重复两行。

<script>
	$("#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>");
		
		$("#buttonClone<?php echo $lineid; ?>").click(function(){
        $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>");
    });

});	

</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'>
	<div id="part<?php echo $lineid; ?>"></div>
   
    <input type="submit" value="submit">
</form>

更新二:

这就是我希望的代码，但是这里的问题是每次单击 dup 按钮时都会提交表单而不是添加新行。我不明白如何为重复按钮提供一个唯一的 id，该 id 与添加的行的 id 相匹配，但未将其包含在表单属性中。

<script>
	$("#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>");
		
		$("#buttonClone<?php echo $lineid; ?>").click(function(){
        $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>");
    });

});	

</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'>
	<div id="part<?php echo $lineid; ?>"></div>
   
    <input type="submit" value="submit">
</form>

更新三:

通过删除表单属性，我可以完全完成我想要的任务，但在使用克隆属性时迭代到下一个值除外。

我不知道如何实现这一点。我在 google 上看到一篇文章以某种方式使用了 next，但这远远超出了我的能力范围。

<script>
	$("#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>");
		
		$("#buttonClone"+count).click(function(){
        $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>");
    });

});	

</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>




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

更新四:

我理解“var count = $("input").length;”获取输入的长度，我明白在点击之外执行此操作，并且我想我明白我已经在点击内添加了迭代，我认为这就是我现在所做的，但它仍然不起作用。克隆仍然没有获取增加的名称值。

<script>
	
	
	
	var count = $("input").length;
	
	$("#button<?php echo $lineid; ?>").click(function(){
		
	var count = $("input[id^=buttonClone]").length +1;			
    
    $("#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>");		
			
		$("#buttonClone"+count).click(function(){
        $("#rowNumber" + count).clone().appendTo("#part<?php echo $lineid; ?>");
			
			
    });	


});		

</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>




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

Answer 1

避免重复 id位于document调整动态创建<button>元素id至class ，同时仍设置 name <input> 的属性元素到count多变的 。

附加click事件".buttonClone" <button>父元素 #part1元素，超出 #button 的范围click处理程序。使用.each() , .replace()替换 name 处的数字克隆元素的属性 input值为 $("#part2 > .rowNumber").length + 1 的元素。替代.prependTo()对于 .appendTo()在授权范围内click事件处理程序。

$("#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>