jqueryクローンに反復を追加する

Question

私は、ユーザー入力を待っている空の入力テキストボックスの新しい行を入力する方法と、ユーザーが入力したばかりのデータを複製できるようにする方法の2つのボタンを持つフォームがあります。私は、データが自動的に複製されることを望んでいません。ユーザが複製/複製される情報のボタンをクリックしなければならないようにします。値の名前は反復することができなければなりません。なぜなら、このデータはmysqlをそれぞれ使用してデータベースに送信されるからです。

リストされたコードは、php whileループでラップされています。

jqueryクローン属性に反復を追加する方法を理解できません。また、一度に1つの行だけをクローンする必要があります。

これはこれまで私が行ってきたことです。現在、2行2行がクローンされている場合は4行、次に4行がクローン化されます。一度に1行追加するだけです。明らかに反復はありません。

jqueryに関しては非常に初心者ですので、何か助けに感謝します。

更新：

私は、各行に行番号を割り当てしようとしている限り、「新しい行を追加」クローンが動作する時にワンクリックを追加されます。ただし、[新しい行を追加]を2回クリックすると、2つの行が複製されます。

<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を与える方法を理解できません。

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

アップデートIII：

私はクローンの属性を使用しながら、次の値に反復処理するために例外を望んでいます正確に何を達成することができ、フォームの属性を除去することにより。

私はそれをどのように達成するか考えていません。私はどこかでGoogleのどこかで投稿を見ましたが、それは何らかの形で次に使用されましたが、それは私の能力を超えたものでした。

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

私はその "VARカウント= $（" 入力 "）の長さを。;" 理解入力の長さを取得し、クリック以外のことを行うことを理解しています。クリックの内側に反復を追加したことを理解していると思いますが、これは私が今行ったことだと思いますが、まだ機能していません。クローンはまだインクリメントされた名前の値を取得していません。所望の結果の

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

Answer 1

documentに重複idのを回避するために、動的<button>要素を作成アジャスト10~classであり、nameの属性を<input>と設定すると、変数はcountになります。

は、親へ".buttonClone"<button>要素#part1要素、#buttonclickハンドラの外部スコープのclickイベントを取り付けます。 $("#part2 > .rowNumber").length + 1の値を持つ要素inputの複製された要素の属性をnameに置き換えるには、.each(),.replace()を使用してください。委任された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>