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添加迭代到克隆

回答

相關問題