jQuery tableau de champs de formulaire dynamique

Question

J'ai une forme html. Une entrée peut être ajoutée plusieurs fois avec des valeurs différentes et reçoit un nom en tant que tableau (comme fieldname[]). Cliquez sur le bouton [+] pour créer de nouveaux champs avec le bouton [-]. En cliquant, vous supprimez cette entrée.

<table cellpadding="0" cellspacing="0"> 
<tr> 
<td>Item</td> 
<td id="resource"> 
<input id="item" name="item[]" type="text" value=""> 
</td> 
<td> 
<img id="addScnt" alt="[+]">&nbsp;</td> 
</tr> 
<br> 
<button id="go">go</button> 
</table> 

jQuery(document).ready(function($){ 
    var scntDiv = $('#resource'); 
    var i = $('#resource p').size() + 1; 
    var name = $('#resource p'); 
    $('#addScnt').live('click', function() { 
     $('<tr><td class="" id=""><input id="item" name="item[]" type="text" value=""><img id="remScnt" alt="[-]"></td></tr>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 
    $('#remScnt').live('click', function() { 
     if(i > 1) { 
       $(this).parent().parent().remove(); 
       i--; 
     } 
     return false; 
    }); 
}); 

Voici le fiddle

Ce que je veux, quand je clique sur le bouton aller, un tableau doit être créé avec des éléments d'entrée, en commençant par l'index 0 pour la valeur de la 1ère entrée. En outre, les lignes doivent recevoir des identifiants en utilisant la même valeur (0 pour la 1ère ligne, 1 pour la 2ème etc.). J'ai défini certains identifiants sur CSS, et si les identifiants sont assignés, cela peut changer la couleur. Le tableau peut être averti finalement (je veux l'utiliser avec ajax, pour passer les valeurs une par une).

Comment est-ce que je peux faire ceci?

Answer 1

Vous devez ajouter des lignes à table pas td donc d'abord vous devez coder pour proper format

Il devrait être comme ça:

<table cellspacing="0" cellpadding="0" id="table"> 
<tbody> 
    <tr> 
     <td>Item</td> 
     <td id="resource"> 
      <input type="text" value="" name="item[]" id="item" class=""> 
     </td> 
     <td> 
      <img alt="[+]" id="addScnt" class="add">&nbsp;</td> 
    </tr> 
    <tr> 
     <td>Item</td> 
     <td id="" class=""><input type="text" value="" name="item[]" id="item"></td> 
     <td><img alt="[-]" id="remScnt" class="minus"></td> 
    </tr> 
</tbody> 
</table> 

Et pour le bouton go

code est

$('#go').live('click',function(){ 
    $('input[name="item[]"]').each(function(){ 
    alert($(this).val());//code what you want on click of button 
    }); 
}); 

contrôle sur violon http://jsfiddle.net/hjNdb/5/

Answer 2

Voici un exemple: http://jsfiddle.net/hjNdb/2/

$(function() { 
    var scntDiv = $('#resource'); 
    var i = $('#resource p').size() + 1; 
    var name = $('#resource p'); 
    $('#addScnt').live('click', function() { 
     var id = $('input').length; // Id attribution 
     $('<tr><td class=""><input id="item' + id + '" name="item[]" type="text" value=""><img id="remScnt" alt="[-]"></td></tr>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 
    $('#remScnt').live('click', function() { 
     if (i > 1) { 
      $(this).parent().parent().remove(); 
      i--; 
     } 
     return false; 
    }); 

    //Array construction 
    $('#go').click(function() { 
     var myArray = []; 
     $('input').each(function() { 
      myArray.push($(this).val()); 
     }); 
     alert(myArray) 
    }); 
});