Ajouter des lignes dynamiquement avec jQuery

Question

Ajouter des lignes dynamiquement avec jQuery

Demandé el 27 de Janvier, 2010: Quand la question a-t-elle été
47911 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis en train de construire un formulaire où j'ai besoin de plusieurs facultatif entrées, ce que j'ai est essentiellement ceci:

form example

Chaque fois qu'un utilisateur appuie sur le bouton plus d'une nouvelle ligne d'entrées d'un formulaire doit être ajouté à la forme, comment puis-je le faire en jQuery? Aussi, est-il possible d'ajouter automatiquement une nouvelle ligne lorsque toutes les lignes (ou juste la dernière ligne, si c'est plus facile / rapide) sont remplis? De cette façon, l'utilisateur n'aurait pas besoin d'appuyer sur le bouton plus.

Je suis désolé de poser peut-être une telle question de base, mais je suis encore très vert avec jQuery, j'ai pu le faire avec PHP, mais je suis sûr que Javascript / jQuery joue un rôle plus approprié ici.

Merci à l'avance!

@alex:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$form = $('#personas');
$rows = $form.find('.person');

$('a#add').click(function() {
    $rows.find(':first').clone().insertAfter($rows.find(':last'));
    $justInserted = $rows.find(':last');
    $justInserted.hide();
    $justInserted.find('input').val(''); // it may copy values from first one
    $justInserted.slideDown(500);
});
</script>
</head>

<body>
<form id="personas" name="personas" method="post" action="">
  <table width="300" border="1" cellspacing="0" cellpadding="2">
    <tr>
      <td>Name</td>
      <td>More?</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name[]" id="name[]" /></td>
      <td><a href="#" id="add">+</a></td>
    </tr>
  </table>
</form>
</body>
</html>

Demandé el 27 de Janvier, 2010 par Alix Axel

Answer 1

5 Réponses

Answer 2

63voto

Rippo Points 10580

Cela vous rapprochera, le bouton d'ajout a été supprimé de la table, vous pouvez donc envisager cela ...

 <script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
          return false;
        });
    });
</script>

Le balisage HTML ressemble à ceci

   <a  id="add">+</a></td>
  <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
  <tbody>
    <tr>
      <td>Name</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name" id="name" /></td>
    </tr>
    </tbody>
  </table>

EDIT Pour vider une valeur d'une zone de texte après l'insertion.

     $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
    $('#mytable tbody>tr:last #name').val('');
    return false;

EDIT2 Je ne pouvais pas m'en empêcher, vous pouvez le faire pour réinitialiser toutes les listes déroulantes du TR inséré

 $("#mytable tbody>tr:last").each(function() {this.reset();});

Je vous laisse le reste!

Répondu el 27 de Janvier, 2010 par Rippo (10580 Points )

Answer 3

7voto

javagirl Points 739

En complément des réponses ci-dessus: vous devrez probablement modifier les identifiants dans les noms / identifiants des éléments d'entrée (notez que vous ne devriez pas avoir de chiffres dans le nom de la zone):

 <input name="someStuff.entry[2].fieldOne" id="someStuff_fdf_fieldOne_2" ..>

J'ai fait cela avec une variable globale définie par défaut à 0:

 var globalNewIndex = 0;

et dans la fonction add après avoir cloné et réinitialisé les valeurs de la nouvelle ligne:

                 var newIndex = globalNewIndex+1;
                var changeIds = function(i, val) {
                    return val.replace(globalNewIndex,newIndex);
                }
                $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds );
                globalNewIndex++;

Répondu el 14 de Mars, 2013 par javagirl (739 Points )

Answer 4

4voto

I J Points 580

J'ai Essayé quelque chose comme ça, et sa fonctionne très bien;

enter image description here

c'est la partie html :

<table class="dd" width="100%" id="data">
<tr>
<td>Year</td>
<td>:</td>
<td><select name="year1" id="year1" >
<option value="2012">2012</option>
<option value="2011">2011</option>
</select></td>
<td>Month</td>
<td>:</td>
<td width="17%"><select name="month1" id="month1">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select></td>
<td width="7%">Week</td>
<td width="3%">:</td>
<td width="17%"><select name="week1" id="week1" >
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select></td>
<td width="8%">&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>Actual</td>
<td>:</td>
<td width="17%"><input name="actual1" id="actual1" type="text" /></td>
<td width="7%">Max</td>
<td width="3%">:</td>
<td><input name="max1" id="max1" type="text" /></td>
<td>Target</td>
<td>:</td>
<td><input name="target1" id="target1" type="text" /></td>
</tr>

c'est la partie Javascript;

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year'+currentItem+'" id="year'+currentItem+'" ><option value="2012">2012</option><option value="2011">2011</option></select></td><td>Month</td><td>:</td><td width="17%"><select name="month'+currentItem+'" id="month'+currentItem+'"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week'+currentItem+'" id="week'+currentItem+'" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%"></td><td colspan="2"></td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text" /></td><td width="7%">Max</td> <td width="3%">:</td><td><input name="max'+currentItem+'" id ="max'+currentItem+'"type="text" /></td><td>Target</td><td>:</td><td><input name="target'+currentItem+'" id="target'+currentItem+'" type="text" /></td></tr>';
  $('#data').append(strToAdd);

 });
 });

 //]]>
 </script>

Finalement PHP présenter la partie:

    for( $i = 1; $i <= $count; $i++ )
{
    $year = $_POST['year'.$i];
    $month = $_POST['month'.$i];
    $week = $_POST['week'.$i];
    $actual = $_POST['actual'.$i];
    $max = $_POST['max'.$i];
    $target = $_POST['target'.$i];
    $extreme = $_POST['extreme'.$i];
    $que = "insert INTO table_name(id,year,month,week,actual,max,target) VALUES ('".$_POST['type']."','".$year."','".$month."','".$week."','".$actual."','".$max."','".$target."')";
    mysql_query($que);

}

vous pouvez trouver plus de détails via la Dynamique de ligne de table insertion

Répondu el 6 de Décembre, 2012 par I J (580 Points )

Answer 5

3voto

alex Points 186293

Non testé. Modifier pour convenir à:

 $form = $('#my-form');

$rows = $form.find('.person-input-row');

$('button#add-new').click(function() {

    $rows.find(':first').clone().insertAfter($rows.find(':last'));

    $justInserted = $rows.find(':last');
    $justInserted.hide();
    $justInserted.find('input').val(''); // it may copy values from first one
    $justInserted.slideDown(500);


});

Cela vaut mieux que de copier innerHTML car vous perdrez tous les événements attachés, etc.

Répondu el 27 de Janvier, 2010 par alex (186293 Points )

Answer 6

0voto

Drew Taylor Points 196

En me basant sur les autres réponses, j’ai un peu simplifié les choses. En clonant le dernier élément, nous obtenons gratuitement le bouton "Ajouter un nouveau" (vous devez changer l'ID en une classe à cause du clonage) et également réduire les opérations DOM. Je devais utiliser filter () au lieu de find () pour obtenir uniquement le dernier élément.

 $('.js-addNew').on('click', function(e) {
   e.preventDefault();
   var $rows   = $('.person'),
       $last   = $rows.filter(':last'),
       $newRow = $last.clone().insertAfter($last);

   $last.find($('.js-addNew')).remove(); // remove old button
   $newRow.hide().find('input').val('');
   $newRow.slideDown(500);
});

Répondu el 1 de Octobre, 2013 par Drew Taylor (196 Points )

Ajouter des lignes dynamiquement avec jQuery

@alex:

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Ajouter des lignes dynamiquement avec jQuery

@alex:

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: