Pour commencer, voici une démonstration de travail, que vous pouvez référencer tout au long de ma réponse: http://jsfiddle.net/EuyB8/.
De toute évidence, la démo est en HTML brut plutôt qu'ASP.NET, mais je vais essayer de résoudre les différences. Pour commencer, puisque vous voudrez créer certains des contrôles que vous clonerez en utilisant les contrôles .NET, mon approche typique est de créer un modèle caché, qui peut ensuite être utilisé pour créer de nouvelles copies. En tant que tel, j'aurais une rangée comme suit:
<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>
-je ajouter ensuite une règle CSS comme ceci:
#TemplateRow { display:none; }
Maintenant, nous avons une ligne que nous pouvons utiliser comme modèle pour l'ajout de nouvelles lignes et le balisage réel pour le modèle peut toujours être généré par .NET. Il est important de noter que lorsque vous utilisez cette approche avec une table, la ligne du modèle doit être à l'intérieur de la table à laquelle vous allez ajouter les lignes, afin de garantir que les cellules ont la largeur appropriée.
Le dernier bit de balisage que nous aurons à faire est de donner un ID à la table, afin que nous puissions manipuler les lignes de notre script. J'ai choisi "BoxTable".
Maintenant, construisons notre script. Parce que vous utilisez .NET, il est important de se rappeler que pour toute balise avec l'attribut runat="server", l'attribut ID généré n'est pas le même que celui que vous affectez dans le champ ID du contrôle. Une solution de contournement simple pour cela est de faire quelque chose comme ce qui suit:
var myClientID = '<%= myServerID.ClientID() %>';
Le serveur délivre alors l'ID client dans une chaîne pour une utilisation facile dans votre script.
Dans cet esprit, voici notre script:
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();
});
Je pense que les commentaires sont assez complet, mais une brève explication de quelques points est justifiée:
D'abord, quand nous cloner le modèle row, nous passons un booléen à la fonction clone. Cela signifie qu'en plus des éléments DOM que nous clonons, nous devrions également cloner les gestionnaires d'événements attachés à ces éléments, et les attacher aux nouveaux clones. Ceci est important pour que la case à cocher "Supprimer la ligne" fonctionne. Deuxièmement, lorsque nous clonons la ligne du modèle, nous clonons également tous les attributs de tous les éléments, y compris les ID. Nous ne voulons pas cela parce que cela viole la conformité XHTML et mes problèmes de cause. Ainsi, nous dépouillons tous les éléments clonés de leurs identifiants. Enfin, comme vous utilisez un bouton de soumission, n'oubliez pas de renvoyer false dans l'événement click du bouton, afin d'éviter qu'il ne soit soumis et qu'il ne provoque une publication.
J'espère que cela répond à votre question. Une dernière chose à garder à l'esprit est que puisque vous créez toutes ces lignes avec jQuery, le serveur n'aura pas d'objets prêts à recevoir les valeurs des entrées. Si vous avez besoin que le serveur ait accès à cette information, vous devrez trouver une méthode pour l'envoyer.