2009-06-04 34 views
5

Mam następujące html, który wyświetla 3 otaczaniem i przycisk Add:Jak dynamicznie dodawać element div za pomocą JQuery?

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="container"> 
    <div id="line-item"> 
    <asp:TextBox ID="txtLineNumber" runat="server"></asp:TextBox> 
    <asp:TextBox ID="txtQty" runat="server"></asp:TextBox> 
    <asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox> 
    <asp:ImageButton ID="imgBtnAddNewLineItem" ImageUrl="~/images/add_button.jpg" 
    runat="server" /> 
    </div> 
    </div> 
    </form> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 
    /jquery.min.js"> 
    </script> 
    <script src="js/invoice.js" type="text/javascript"></script> 
</body> 
</html> 

Gdy użytkownik kliknie przycisk Add, chcę utworzyć inny div z id elementu zamówienia i umieścić go w następnej linii . Stworzyłem plik js, ale nie jestem pewien, jak to zrobić?

Oto co mam do tej pory:

var ITEMCOUNT = 0;

function getLineItem(number) { 
    var div = document.createElement('div'); 

    $(div).attr("id", "lineitem" + number); 
    var t1 = getTextbox("txt" + number.toString() + "1"); 
    var t2 = getTextbox("txt" + number.toString() + "2"); 
    var t3 = getTextbox("txt" + number.toString() + "3"); 

    $(div).append(t1); 
    $(div).append(t2); 
    $(div).append(t3); 

    return $(div); 
} 

function getTextbox(id) { 
    var textbox = document.createElement('input'); 
    $(textbox).attr("id", id); 
    return $(textbox); 
} 


var lineItemCount = 0; 

    $('#imgBtnAddNewLineItem').click(function() { 

    lineItemCount++; 

    $('#line-item').clone().attr('id',getLineItem(lineItemCount)).appendTo('#container'); 
    }); 
}); 
+0

Twoje najnowsze dzieło nie działa. getLineItem() zwraca element DIV, który zawiera 3 elementy pola tekstowego. Powinieneś dołączyć cały obiekt do kontenera. Streszczenie: container.append (getLineItem()) – Ropstah

Odpowiedz

6
$(document).ready(function() { 
    $('#imgBtnAddNewLineItem').click(function() { 
     $('#container').append('<div></div>'); 
    }); 
}); 

Aktualizacja 2

Tworzenie zwykłego przycisku tak:

<input type="button" id="imgBtnAddNewLineItem" value="Add lineitem" /> 

Aktualizacja ** To jest też na bieżąco z komentarzami itp .. **

//Count the lineItems to make sure they are unique 
var lineItemCount = 0; 

//On document ready 
$(document).ready(function() { 
    //On button click 
    $('#imgBtnAddNewLineItem').click(function(e) { 
     /* 
      ADD THE FOLLOWING LINE TO PREVENT THE POSTBACK 
      P.S. - Make sure you pass -e- to this function... 

     */ 
     e.preventDefault(); 



     //Increase the lineitemcount 
     lineItemCount++; 
     //Add a new lineitem to the container, pass the lineItemCount to make sure getLineItem() can generate a unique lineItem with unique Textbox ids 
     $(container).append(getLineItem(lineItemCount)); 
    }); 
}); 

//Create a new DIV with Textboxes 
function getLineItem(number) { 
    var div = document.createElement('div'); 
    //Give the div a unique id 

    div.setAttribute('id','lineitem_' + number); 

    //pass unique values to the getTextbox() function 
    var t1 = getTextbox('txt_' + number + '_1'); 
    var t2 = getTextbox('txt_' + number + '_2'); 
    var t3 = getTextbox('txt_' + number + '_3'); 

    div.appendChild(t1); 
    div.appendChild(t2); 
    div.appendChild(t3); 

    return div; 
} 

//Create a textbox, make sure the id passed to this function is unique... 
function getTextbox(id) { 
    var textbox = document.createElement('input'); 
    textbox.setAttribute('id',id); 
    textbox.setAttribute('name',id); 
    return textbox; 
} 
+0

Próbowałem tego, ale to, co faktycznie chcę zrobić, to dołączenie elementu div z elementem wiersza id za pomocą 3 pól tekstowych i przycisku obrazu, a nie tylko pustego elementu div. – Xaisoft

+0

Ponadto, gdy wykonuję test z

Hello

, miga on na ekranie, ale nie pozostaje. – Xaisoft

+2

To jest globalnie, jak dołączać elementy. Możesz także dołączać obiekty jQuery lub obiekty Javascript HTML Element. Naprawdę trzeba stworzyć trochę logiki, aby określić identyfikator pola tekstowego. Te, które pojawiają się na początku, są generowane przez środowisko ASP.NET. Może powinieneś rozważyć utworzenie ich wszystkich (również pierwszego elementu) z jQuery. Pomoże to w określeniu, który algorytm będzie używany do określania nazw/identyfikatorów formularzy. – Ropstah

1

Można użyć .append() metodę lub .html()

+0

Co stanie się z identyfikatorem asp.net, gdy będę nadal dodawać elementy? – Xaisoft

+0

musisz wstawić identyfikatory elementów jako zmienne –

+0

Co dokładnie masz na myśli? – Xaisoft

4

spróbować czegoś takiego:

$(document).ready(function() { 
    $('#imgBtnAddNewLineItem').click(function() { 
    var container = $("#container"); 
    var line = $('#line-item').clone().attr("id", "line-item-2") 
    var lineCount = container.children().length + 1; 
    line.attr("id", line.attr("id") + "-" + lineCount); 
    line.find(":text").each(function() { 
     // IDs need to be unique 
     $(this).attr("id", $(this).attr("id") + "-" + lineCount); 
     $(this).attr("name", $(this).attr("name") + "-" + lineCount); 
     // clear the value since we're cloning a line that may have values in it 
     $(this).val(""); 
    }); 
    container.append(line); 
    }); 
}); 

UWAGA: trzeba zmienić identyfikator.

+0

Podobał mi się w ten sposób lepiej niż moje i inne, proste i jasne –

+0

cletus jest dobry chainer .. Spróbuj połączyć to z moim przykładem i jesteś gotowy do pracy;) – Ropstah

+0

cletus, który działa , ale element linii pokazuje się na ekranie, a następnie znika. Za każdym razem, gdy klikam przycisk, wstawia on również we wszystkich polach tekstowych. – Xaisoft

Powiązane problemy