Répétition du contrôle dans jQuery

Question

J'ai un contrôle avec 2 zones de texte et une zone de sélection dans une rangée. L'utilisateur peut ajouter ou supprimer n'importe quel ensemble de ces lignes. Je dois le faire en jQuery. Quelqu'un at-il de bons liens pour ce genre de fonction/plugin jQuery

Answer 1

J'ai posté un moyen rapide et, assez, sale de le faire sur le jsbin, la JS et CSS est ci-dessous:

JavaScript/jQuery:

$(document).ready(
    function() { 
     $('span.add').live('click', 
      function() { 
       var 
       lastRow = parseInt($('fieldset:last-child').attr('id').slice('1')), 
       newRow = lastRow+1, 
       newXhtml = '<label for="inputRow' + newRow + '">Label Text</label> <input type="text" name="inputRow' + newRow + '" id="inputRow' + newRow + '" <label for="selectRow' + newRow + '">Label Text</label> <select name="selectRow'+newRow+' id="selectRow'+newRow+'><optgroup label="something"><option value="thisVal">This Value</option><option value="thatVal">That Value</option></optgroup></select><span class="addDelete"><span class="delete">X</span><span class="add">+</span></span>'; 
       $('form').append('<fieldset id="_' + newRow + '" />'); 
       $('form fieldset:last-child').prepend(newXhtml); 
      } 
     ); 
     $('span.delete').live('click', 
      function() { 
       if ($('fieldset').length > 1) { 
        $(this).closest('fieldset').remove(); 
       } 
      } 
     ); 
    } 
); 

CSS:

fieldset { 
     width: 40em; 
     margin: 1em auto; 
     font-size: 0.8em; 
     } 

fieldset input, 
fieldset label { 
     display: inline; 
     width: auto; 
     } 

span.addDelete { 
     float: right; 
     } 

span.addDelete span { 
     border: 1px solid #000; 
     color: #000; 
     font-weight: bold; 
     margin: 0 0.2em 0 0; 
     } 

span.delete  { 
     background-color: #f00; 
     } 

span.add { 
     background-color: #0f0; 
     } 

Il y a la question relativement importante de la façon dont vous générez laajoutée dynamiquementboîtes, mais je pars que -happily- comme un exercice pour vous, et il ya probablement un moyen plus agréable de générer la variable newXhtml, mais j'ai choisi de le laisser pour plus de simplicité.

La mise en œuvre actuelle, en raison de l'évaluation if ($('fieldset').length > 1) empêche l'utilisateur de supprimer tous les fieldsets, mais ne les empêche pas la suppression d'un particulier fieldset. Vous voudrez peut-être vérifier cette approche. Si vous avez des questions, s'il vous plaît n'hésitez pas à demander dans les commentaires et, bien, je ferai de mon mieux =)