Question

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

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

我无法弄清楚如何将迭代添加到jquery clone属性。另外，我只希望一次克隆一行。

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

对于jquery，我是非常新手，所以任何帮助都表示赞赏。

更新

我试图为每一行分配行号，只要＆＃34;添加新行＆＃34;克隆将一次添加一次点击。但是，如果单击“添加新行”两次，则将复制两行。

＆＃13;

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

＆＃13;

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

＆＃13;

更新II：

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新III：

通过删除表单属性，我可以完全按照我想要的方式完成，但在使用clone属性时迭代到下一个值。

我不知道如何做到这一点。我在谷歌的某个地方看到了一个帖子，它以某种方式使用了下一个但是它超出了我的能力。

＆＃13;

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

＆＃13;

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

＆＃13;

更新IV：

我明白＆＃34; var count = $（＆＃34;输入＆＃34;）。长度;＆＃34;得到输入的长度，我知道在点击之外做这个，我想我明白我已经在点击内添加了迭代我认为这就是我现在所做的但它仍然无法正常工作。克隆仍未获取递增的名称值。

＆＃13;

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

＆＃13;

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

＆＃13;

期望结果的示例：

＆＃13;

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

＆＃13;

Answer 1

要避免在id中重复document次调整动态创建的<button>元素id到class，同时仍设置name属性{ {1}}元素到<input>变量。

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

＆＃13;

click

＆＃13;

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

＆＃13;

jquery添加迭代来克隆

1 个答案: