按下按鈕增加數據，然後推到多維數組

我有關於什麼時候我推按鈕它添加另一個元素加上元素的名稱這個問題也在數組中增加很好，很難解釋，但我會提供一些截圖。按下按鈕增加數據，然後推到多維數組

我通過這個網站搜索了一堆解決方案和whatnots，不幸的是我似乎無法將它應用於我的問題。

下面是我的願望輸出的屏幕截圖。

如果我點擊添加按鈕，另一個字段集將它上面

enter image description here

顯示的結果將是

enter image description here

所以，如果我再次按下「添加」按鈕，它會顯示另一個永遠不會結束的字段集循環，並帶有相應的遞增輸入類型名稱。

代碼：

的Fielset

<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;" id="fieldset_fblikeus"> 
    <div class="condition"> 
     <div class="clear"></div> 
     <div>Label</div> 
     <div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div> 
     <div class="clear" style="padding-top:5px;"></div> 
     <div>URL to Like</div> 
     <div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div> 
     <div class="clear" style="padding-top:5px;"></div> 
    </div> 
</fieldset>

代碼的佈局啓動功能

<a onclick="fb_likeus_add();">Add</a> 

function fb_likeus_add() { 
    var fieldset_data = '<fieldset style="border:1px solid #DSDCDF; padding:10px; margin-bottom:10px;"><div class="condition"><div class="clear"></div><div>Label</div><div><input class="gate-condition" name="label_" size="30" type="text" value="<?php echo $fb_page[0]; ?>"></div><div class="clear" style="padding-top:5px;"></div><div>URL to Like</div><div><input class="gate-condition" name="url_" size="30" type="text" value="<?php echo $fb_page[1]; ?>"></div><div class="clear" style="padding-top:5px;"></div></div></fieldset>'; 

    $("#fb_likeus_td").prepend(fieldset_data); 
}

的主要問題是，當我按添加按鈕如何遞增輸入元素的名稱，同時將數據預先掛到div，我不知道從哪裏開始。但是我想到了它應該看起來像什麼。

Array = [ 

div1 ['name_1', 'url_1'], 

div2 ['name_2', 'url_2'], 

div3 ['name_3', 'url_3'], 

div4 ['name_4', 'url_4'], 

div5 ['name_5', 'url_5'] 

and so on, it increments when you click the add button. 

];

這很難解釋，仍然希望你們明白我的問題。如果你們幫助我會很高興，這意味着很多。提前致謝。

來源

2013-01-18 Wesley Brian Lachenal

所以你的意思是，這樣的事情？ http://jsfiddle.net/Dw8e7/ – aroth

是的！那個！非常感謝！，你應該把它放在答案上，以便我可以接受它。不過，謝謝，欠你一個。 –

解決這個問題的方法之一是在包含要插入標記的頁面上的某個位置放置一個隱藏的「模板」div。在這種特定情況下，標記相對簡單，因此您可以將模板標記存儲爲JavaScript字符串，但這通常比在頁面上使用隱藏的div更容易維護。

在任何情況下，一旦您擁有模板標記，您只需添加少量JavaScript代碼即可追蹤您向頁面添加了新的fieldset多少次。通過這個，你可以更新你的fb_likeus_add()函數，在模板標記上執行一個簡單的字符串替換，在將其前置到div之前插入正確的序列號。

這聽起來可能參與了一點，但它確實需要非常少的代碼：

//initialize this when the page loads 
var numAdded = 0; 

function fb_likeus_add() { 
    //increment the counter 
    numAdded++; 

    //grab the template html 
    var templateHtml = $("#template").html(); 

    //write the new count into the template html 
    templateHtml = templateHtml.replace(/label_/g, "label_" + numAdded) 
           .replace(/url_/g, "url_" + numAdded); 

    //prepend the updated HTML to the document 
    $("#container").prepend(templateHtml); 
};

下面是一個例子：http://jsfiddle.net/Dw8e7/1/

來源

2013-01-18 07:02:52 aroth

按下按鈕增加數據，然後推到多維數組

回答

相關問題