mit zu starten, hier ist eine Arbeits Demo, auf die Sie in meiner Antwort verweisen können: http://jsfiddle.net/EuyB8/.
Offensichtlich ist die Demo in einfachem HTML anstatt ASP.NET, aber ich werde versuchen, die Unterschiede anzugehen.
Um zu starten, da Sie einige der Steuerelemente erstellen möchten, die Sie mit .NET-Steuerelemente klonen werden, ist meine typische Vorgehensweise, eine ausgeblendete Vorlage zu erstellen, die dann zum Erstellen neuer Kopien verwendet werden kann. Als solches würde ich eine Zeile wie die folgende haben:
<tr id="TemplateRow">
<td>
<asp:DropDownList ID="ddl_BoxName" runat="server">
<asp:ListItem Value="attr1" Selected="True"></asp:ListItem>
<asp:ListItem Value="attr2"></asp:ListItem>
<asp:ListItem Value="attr3"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddl_BoxComparision" runat="server">
<asp:ListItem Value="=" Selected="true"></asp:ListItem>
<asp:ListItem Value=">"></asp:ListItem>
<asp:ListItem Value="<"></asp:ListItem>
<asp:ListItem Value="Like"></asp:ListItem>
<asp:ListItem Value="!="></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox>
</td>
<td>
<asp:CheckBox ID="chk_DeleteBoxRow" runat="server" />
</td>
</tr>
ich dann eine CSS-Regel hinzufügen, etwa so:
#TemplateRow { display:none; }
Jetzt haben wir eine Reihe, die wir als Vorlage neu verwenden können, für das Hinzufügen Zeilen und das tatsächliche Markup für die Vorlage kann weiterhin von .NET generiert werden. Es ist wichtig zu beachten, dass bei Verwendung dieses Ansatzes mit einer Tabelle die Schablonenzeile innerhalb der Tabelle liegen muss, an die Sie die Zeilen anhängen, um sicherzustellen, dass die Zellen die richtige Breite haben.
Das letzte bisschen Markup, das wir tun müssen, ist, der Tabelle eine ID zu geben, damit wir die Zeilen in unserem Skript manipulieren können. Ich habe "BoxTable" gewählt.
Nun, lassen Sie uns unser Skript konstruieren. Da Sie .NET verwenden, müssen Sie daran denken, dass für jedes Tag mit dem Attribut runat="server" das ID-Attribut, das generiert wird, nicht mit dem übereinstimmt, das Sie im ID-Feld des Steuerelements zugewiesen haben. Eine einfache Abhilfe für das ist so etwas wie die folgenden Funktionen ausführen:
var myClientID = '<%= myServerID.ClientID() %>';
Der Server gibt dann die Client-ID in einen String für einfachen Gebrauch in Ihrem Skript.
, die mit im Auge, hier ist unser Skript:
var btn_AddAttr = '<%= btn_AddAttr.ClientID() %>';
$(function() {
//attach the a function to the click event of the "Add Box Attribute button that will add a new row
$('#' + btn_AddAttr).click(function() {
//clone the template row, and all events attached to the row and everything in it
var $newRow = $('#TemplateRow').clone(true);
//strip the IDs from everything to avoid DOM issues
$newRow.find('*').andSelf().removeAttr('id');
//add the cloned row to the table immediately before the last row
$('#BoxTable tr:last').before($newRow);
//to prevent the default behavior of submitting the form
return false;
});
//attach a remove row function to all current and future instances of the "remove row" check box
$('#DeleteBoxRow').click(function() {
//find the closest parent row and remove it
$(this).closest('tr').remove();
});
//finally, add an initial row by simulating the "Add Box Attribute" click
$('#' + btn_AddAttr).click();
});
Ich denke, die Kommentare ziemlich gründlich, aber eine kurze Erklärung von einigen Punkten gerechtfertigt ist:
Zuerst wird, wenn wir die Vorlage klonen Zeile übergeben wir einen booleschen Wert an die Klonfunktion. Dies besagt, dass wir zusätzlich zu den DOM-Elementen, die wir klonen, auch die Event-Handler klonen sollten, die an diese Elemente angehängt sind, und sie an die neuen Klone anhängen. Dies ist wichtig, damit das Kontrollkästchen "Zeile löschen" funktioniert.
Zweitens, wenn wir die Vorlagenzeile klonen, klonen wir auch alle Attribute aller Elemente, einschließlich der IDs. Wir wollen das nicht, weil es gegen die XHTML-Kompatibilität und meine Cause-Probleme verstößt. Daher entfernen wir alle geklonten Elemente ihrer IDs.
Schließlich, da Sie eine Senden-Schaltfläche verwenden, ist es wichtig, daran zu denken, im Click-Ereignis der Schaltfläche false zurückzugeben, um zu vermeiden, dass das Formular übermittelt und ein Postback verursacht wird.
Hoffentlich beantwortet dies Ihre Frage. Eine letzte Sache, die Sie beachten sollten, ist, dass, da Sie alle diese Zeilen mit jQuery erstellen, der Server keine Objekte haben wird, die bereit sind, die Werte der Eingaben zu empfangen. Wenn Sie benötigen, dass der Server Zugriff auf diese Informationen hat, müssen Sie herausfinden, wie Sie diese Informationen senden.