Jquery lignes dynamiques avec formulaire

J'essaie de changer les 'entrées' de cette démo en 'sélectionne'. La démo fonctionne très bien, ce qui est à:Jquery lignes dynamiques avec formulaire

 
http://devblog.jasonhuck.com/assets/infiniteformrows.html

Le problème est modifié est à chaque fois que vous cliquez sur Ajouter une nouvelle ligne, il perd la sélection du rang précédent, ce qui a été sélectionné. Ajouter un événement de mise au point sur toutes les entrées pour définir la mise au point actuelle.

<html> 
     <head> 
      <title>Infinite Form Rows</title> 
      <script 
       type="text/javascript" 
       src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"> 
      </script> 
      <script type="text/javascript"> 
      $(function(){ 
       // start a counter for new row IDs 
       // by setting it to the number 
       // of existing rows 
       var newRowNum = 0; 

       // bind a click event to the "Add" link 
       $('#addnew').click(function(){ 
        // increment the counter 
        newRowNum += 1; 

        // get the entire "Add" row -- 
        // "this" refers to the clicked element 
        // and "parent" moves the selection up 
        // to the parent node in the DOM 
        var addRow = $(this).parent().parent(); 

        // copy the entire row from the DOM 
        // with "clone" 
        var newRow = addRow.clone(); 

        // set the values of the inputs 
        // in the "Add" row to empty strings 
        $('input', addRow).val(''); 
        $('select', addRow).val(''); 

        // replace the HTML for the "Add" link 
        // with the new row number 
        $('td:first-child', newRow).html(newRowNum); 

        // insert a remove link in the last cell 
        $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>'); 

        // loop through the inputs in the new row 
        // and update the ID and name attributes 
        $('input', newRow).each(function(i){ 
         var newID = newRowNum + '_' + i; 
         $(this).attr('id',newID).attr('name',newID); 
        }); 


        // loop through the inputs in the new row 
        // and update the ID and name attributes 
        $('select', newRow).each(function(i){ 
         var newID = newRowNum + '_' + i; 
         $(this).attr('id',newID).attr('name',newID); 
        }); 

        // insert the new row into the table 
        // "before" the Add row 
        addRow.before(newRow); 

        // add the remove function to the new row 
        $('a.remove', newRow).click(function(){ 
         $(this).parent().parent().remove(); 
         return false;    
        }); 

        // prevent the default click 
        return false; 
       }); 
      }); 
      </script> 
     </head> 
     <body> 
      <form> 
       <table id="tabdata"> 
        <thead> 
         <tr> 
          <th>Row</th> 
          <th>Cell 1</th> 
          <th>Cell 2</th> 
          <th>Cell 3</th> 
          <th></th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td><a id="addnew" href="">Add</a></td> 
          <td> <select name="1_0" id="1_0" style="width: 160px;"> 


        <option value="option1">Option 1</option> 
       <option value="option2">Option 2</option> 
       <option value="option3">Option 3</option>       
       <option value="option4">Option 4</option>       
       <option value="option5">Option 5</option> 

       </select> 
    </td> 
          <td><input id="n0_2" name="n0_2" type="text" /></td> 
          <td><input id="n0_3" name="n0_3" type="text" /></td> 
          <td></td> 
         </tr> 
        </tbody> 
       </table> 

       <input id="go" name="go" type="submit" value=" Save " /> 
      </form> 
     </body> 
    </html>

Source

2009-11-30 bocca

var currentFocus = null; 
$(':input').focus(function(){currentFocus = $(this))})

puis en $ ('# addnew'). Cliquez sur, ajoutez ce au fond

if (currentFocus) 
    currentFocus.focus();

Source

2009-11-30 04:09:10

entrées fonctionnent très bien, ses Selects avoir des problèmes. avec celui modifié, lorsque vous sélectionnez "option 4", et cliquez sur ajouter une nouvelle ligne, il ajoute une nouvelle ligne, et la sélection par défaut de "option 4" à "option 1" – bocca

Avez-vous un lien pour une sélection version de celui-ci? –

Le code ci-dessus est la version sélectionnée – bocca

Jquery lignes dynamiques avec formulaire

Répondre

Questions connexes