[AJAX] Ajout de ligne tableau dynamique

**Guignon** · 18/04/2013, 14h47

Bien le bonjour ami(e)s développeurs,

Je viens à vous car je n'arrive pas à trouver de solution à mon problème :

-Ajouter des lignes dynamiquement dans un tableau
-Les lignes ( qui comportent des input ) doivent être dans un formulaire
-Le formulaire et envoyer dans un script PHP qui gère les données, les enregistres

Ceci sans recharger la page.
Voilà donc je ne dois pas bien m'y prendre.

Je vous fais part du travaille que j'ai déjà entrepris.

Le HTML contenant le tableau. Il y a déjà 3 lignes, si l'utilisateur à besoin que de ses 3 lignes sa fonctionne, sinon il faut qu'il en rajoute et c'est la que sa bug.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<form method="post">
<table id="Tableau_Data_Nprog">
<tr>
    <th></th>
    <th>Nombre de série</th>
    <th>Nombre de répétition</th>
    <th>Poids</th>
</tr>
<tr>
	<td></td>
	<td><input type="text" id="Serie_Nprog0" name="Serie_Nprog0" value="Vos donnees" maxlength="3"></td>
    <td><input type="text" id="Repete_Nprog0" name="Repete_Nprog0" value="Vos donnees" maxlength="3"></td>
	<td><input type="text" id="Poids_Nprog0" name="Poids_Nprog0" value="Vos donnees"  maxlength="3"></td>
</tr>
<tr>
	<td></td>
	<td><input type="text" id="Serie_Nprog1" name="Serie_Nprog1" value="Vos donnees" maxlength="3"></td>
    <td><input type="text" id="Repete_Nprog1" name="Repete_Nprog1" value="Vos donnees" maxlength="3"></td>
	<td><input type="text" id="Poids_Nprog1" name="Poids_Nprog1" value="Vos donnees"  maxlength="3"></td>
 
</tr>
</table>
 
<table id="Table_Series">
</table>
 
<table>
<tr>
	<td><input type="button" value="Ajouter une série" name="AddSeries" onclick="Add_Serie_Nprog()"></td>
</tr>
</table>
 
<center><input type="button" name="Save_Nprog" size="15" value="Enregistrer votre programme" onClick="return On_Save_NProg();"></center>
</form>

La fonction "Add_Serie_Nprog()" ajoute une ligne dans la table "Table_Series" qui est enfaite une table en dessous de l'autre table "Tableau_Data_Nprog"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$.ajax({
	type: "POST",
	url: "TraiteData.php",
	success: function(msg)
	{
		$("#Table_Series").prepend(msg);						
	}
});

Qui va sur TraiteData et ajoute une ligne dans la table "Table_Series"

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table id="Table_NSeries">
<tr>
	<td></td>
	<td><input type="text" id="<?php echo "Serie_Nprog"+$Nb_Lignes_series; ?>" id="<?php echo "Serie_Nprog"+$Nb_Lignes_series; ?>" value="Vos donnees" maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>
    <td><input type="text" id="<?php echo "Repete_Nprog"+$Nb_Lignes_series; ?>" id="<?php echo "Repete_Nprog"+$Nb_Lignes_series; ?>" value="Vos donnees" maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>
	<td><input type="text" id="<?php echo "Poids_Nprog"+$Nb_Lignes_series; ?>" id="<?php echo "Poids_Nprog"+$Nb_Lignes_series; ?>" value="Vos donnees"  maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>
</tr>
</table>

L'ajout de ligne est OK, mais après je n'arrive pas à récupérer les données des nouvelles lignes ajoutés...

Dans ma fonction On_Save_NProg() il y a

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//RECUPERATION DES DONNEES DE LA TABLE CREER
        //Récupération du nombre de nouveau TR de la table CREER
	var MontableauAddSeries = document.getElementById("Table_NSeries");
	var NbTR_AddSeries = MontableauAddSeries.rows.length;
 
		var TabAddSerie = new Array;
		var u = 1 ;
		for(u = 1; u <= NbTR_AddSeries;u++){
			var numSerie = "Serie_Nprog"+u ;
			alert(numSerie);
			var Serie_NProg = document.getElementById(numSerie).value ;
			TabAddSerie[i] = Serie_NProg;
			alert(TabAddSerie);
		}

Il me trouve 1 ligne dans la table "Table_NSeries", qu'on en ajoute 1 ou 5.

Je ne sais pas trop comment faire pour rassembler toutes ses données dans le formulaire, ou alors si il y a un moyen de faire tous le tableau en AJAX et avec une fonction envoyer les données vers un script PHP ?

Merci d'avoir pris le temps de lire. Désolé si je n'ai pas été trop compréhensible

Cordialement

**andry.aime** · 18/04/2013, 18h50

Bonsoir,

La concaténation se fait avec un "." en php mais pas avec un "+".

A+.

**Guignon** · 18/04/2013, 20h54

Merci de la réponse, mais tous marche dans ce code enfaite.

Je ne sais juste pas comment récupérer les données qui seront saisi dans les inputs, de la nouvelle ligne qui a été créer.

J'espère que vous voyez ce que je veux dire ^^

**andry.aime** · 18/04/2013, 21h57

L'ajout fonctionne mais à cause de ça

id="<?php echo "Serie_Nprog"+$Nb_Lignes_series; ?>

l'id généré ne coïncide pas avec l'id appelé dans le javascript.
Essaie de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
success: function(msg)
	{
		alert(msg);
		$("#Table_Series").prepend(msg);						
	}

pour vérifier.

A+.

**Guignon** · 19/04/2013, 01h49

J'ai changé le + avec le "." ! Et donc on récupère bien les données de la 1ere ligne créé Merci

Mais par contre on récupère seulement 1 ligne...

Ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var NbTR_AddSeries = MontableauAddSeries.rows.length;

Il ne retourne que 1 ligne.

**andry.aime** · 19/04/2013, 05h52

Dans la page appelée

Vire les balises table ouvrante et fermante.

A+.

**andry.aime** · 19/04/2013, 09h07

Attention

<input type="text" id="<?php echo "Serie_Nprog"+$Nb_Lignes_series; ?>" id="<?php echo "Serie_Nprog"+$Nb_Lignes_series; ?>" value="Vos donnees" maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>

Tu as deux fois l'attribut id mais pas d'attribut name pour les input générés.

A+.

**Guignon** · 19/04/2013, 11h11

Hello

Yes c'est fait pour l'id et le name. Sa n'a pas bougé ^^

Mais par contre pour la table c'est bizarre.

Pour la nouvelle ligne ajouté elle vient s’insérer la dedans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table id="Table_Series"></table>

Et en plus il y a une nouvelle table dans le script PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table id="Table_NSeries">

Enfaite j'ai bidouillé pour que la nouvelle ligne s'insère correctement, et aligné avec les 3 autres du dessus.

J'ai essayé, même si la nouvelle ligne n'est pas aligné, de voir si il me récupérerais quelque chose ( en changeant le nom de la table dans le script AJAX ) mais sa ne change rien.

Il aime pas trop si il y a des tables dans des tables ?

**andry.aime** · 19/04/2013, 11h35

Re,

Je n'ai pas fait attention au "N" qui les différencie

Sinon, tu peux pas mettre une balise table directement dans une balise table, c'est contre nature

. En plus tu risques d'avoir plusieurs tables imbriqués avec le même id, un id doit être unique. Donc la balise table à virer.
Comme tu utilises jQuery, je te propose ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input[id^="Serie_Nprog"]').each(function (index){alert (this.attr("id")+":"+this.val())});

à la place de la boucle for.

Montre nous le code HTML retourner par la requête AJAX.

A+.

**Guignon** · 19/04/2013, 11h43

Je test !

Mais il va falloir voir comment aligné les tables... Si je bouge la balise table dans le script PHP, sa n'est plus aligné :/

Edit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input[id^="Serie_Nprog"]').each(function (index){alert (this.attr("id")+":"+this.val())});

Mais il manque quelque chose à "Serie_Nprog", il y a incrémentation ( "Serie_Nprog4", "Serie_Nprog5"...).

**andry.aime** · 19/04/2013, 11h45

Ah oui

var Montableau = document.getElementById("Tableau_Data_Nprog");
var NbLignes = Montableau.rows.length;

NbLignes sera toujours à 1 car ce n'est pas dans cette table que tu ajoutes de nouveau lignes.

Vérifie chaque id des input créés, ils seront le même.

A+.

**andry.aime** · 19/04/2013, 11h51

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#Tableau_Data_Nprog").prepend(msg);

**Guignon** · 19/04/2013, 12h04

Cette table ne bouge pas !! Et retourne toujours 3 ligne

Et je récupère les données de c'est 3 lignes

C'est sur l'autre table qu'ils faut qu'on regarde plutôt nan ?

"Table_Series"

Et sa me retourne 0 ligne de créer :/

Par contre si je refait une table dans le script PHP la il me retourne 1 ligne !
Et l'id du input concorde. Et, vu qu'il y a qu'un résultat, le for ne tourne qu'une fois ( dans la fonction d'enregistrement ) donc on récupère seulement les données du 1er input ^^

**andry.aime** · 19/04/2013, 12h15

Attend on va tout reprendre à 0

.
Je te conseille d'utiliser une seule tableau pour tout.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var NbLignes = $('#Tableau_Data_Nprog tr').length;;
$.ajax({
	type: "POST",
	url: "TraiteData.php",
	data: "NbLignes="+encodeURIComponent(NbLignes)+"&rdm="+Math.random()+"",
	success: function(msg)
	{
	  ("#Tableau_Data_Nprog").prepend(msg);						
	}
});

Pour le parcours

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input[id^="Serie_Nprog"]').each(function (index){alert (this.attr("id")+":"+this.val())});

Et pour le php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<tr>
	<td><input type="text" id="<?php echo "Serie_Nprog".$Nb_Lignes_series; ?>" name="<?php echo "Serie_Nprog".$Nb_Lignes_series; ?>" value="Vos donnees" maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>
    <td><input type="text" id="<?php echo "Repete_Nprog".$Nb_Lignes_series; ?>" name="<?php echo "Repete_Nprog".$Nb_Lignes_series; ?>" value="Vos donnees" maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>
	<td><input type="text" id="<?php echo "Poids_Nprog".$Nb_Lignes_series; ?>" name="<?php echo "Poids_Nprog".$Nb_Lignes_series; ?>" value="Vos donnees"  maxlength="30" onFocus=" this.value=''" onkeyup="if(/\D/.test(this.value)) this.value='';"></td>
</tr>

**andry.aime** · 19/04/2013, 12h20

Euh, pourquoi tu veux utiliser AJAX or que tu ne cherches rien au serveur?
Utilises seulement prepend de jQuery directement avec les balises tr et td.

**Guignon** · 19/04/2013, 12h24

J'allais te dire la même chose

Enfaite excuse mais j'ai remodifier ce que tu viens de mettre ( tu peux aller voir dans le tous premier sujet ) et l'incrémentation ce fais dans la page PHP avec une variable seesion :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$_SESSION['NbLigneADD'] = $_SESSION['NbLigneADD'] + 1 ;
$Nb_Lignes_series = $_SESSION['NbLigneADD'] ;

On récupére pas le nombre de ligne de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var NbLignes = $('#Tableau_Data_Nprog tr').length;;

Cette ligne est supprimé.

Donc avec ceci on reprend le tableau à partir de 4 ( 3 lignes déjà faite donc la on arrive à 4

)

Donc on aura dans la première ligne créer "Serie_Nprog4". Ensuite lorsqu'il aura un autre ajout, "Serie_Nprog5" etc normal et sa marche.

**Guignon** · 19/04/2013, 12h25

De créer les TR ,TD et input avec jQUERY ?

Si sa se trouve il y a une solution plus simple oui mais je ne sais pas trop comment m'y prendre ^^

J'avais essayé ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#Tableau_Data_Nprog tbody>table:last').append('<tr><td></td><td> <input type="text" name="Serie_Nprog'+NbLignes+'" value=""></td><td> <input type="text" name="Repetes_Nprog'+NbLignes+'" value=""></td><td> <input type="text" name="Poids_Nprog'+NbLignes+'" value=""></td></tr>');

Ralala sa marche ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var Montableau = document.getElementById("Tableau_Data_Nprog");
	var NbLignes = Montableau.rows.length;
	alert(NbLignes);
 
	//$('#Tableau_Data_Nprog tbody>tr:last').clone(true).insertAfter('#Tableau_Data_Nprog tbody>tr:last');
	$('#Tableau_Data_Nprog').append('<tr><td></td><td> <input type="text" name="Serie_Nprog'+NbLignes+'" value=""></td><td><input type="text" name="Repetes_Nprog'+NbLignes+'" value=""></td><td><input type="text" name="Poids_Nprog'+NbLignes+'" value=""></td></tr>');

Mais j'arrive pas à récupéré les données des input créer encore ^^

Mais faut peut être vérifier les id

**Guignon** · 19/04/2013, 12h57

Ok j'ai vérifié tous les input, tous les noms sont bons voilà regarde ce que j'ai maintenant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Add_Serie_Nprog(){
	//Récupération du nombre de TR de la table déjà faite
	var Montableau = document.getElementById("Tableau_Data_Nprog");
	var NbLignes = Montableau.rows.length;
	alert(NbLignes);
	var NbReal_LigneTable = NbLignes - 1 ;
 
	//$('#Tableau_Data_Nprog tbody>tr:last').clone(true).insertAfter('#Tableau_Data_Nprog tbody>tr:last');
	var LesSeries_Nprog = "Serie_Nprog"+NbReal_LigneTable ;
	alert(LesSeries_Nprog);
	var LesRepetes_Nprog = "Serie_Nprog"+NbReal_LigneTable ;
	var LesPoids_Nprog = "Serie_Nprog"+NbReal_LigneTable ;
 
	$('#Tableau_Data_Nprog').append('<tr><td></td><td> <input type="text" name="'+LesSeries_Nprog+'" value=""></td><td><input type="text" name="'+LesRepetes_Nprog+'" value=""></td><td><input type="text" name="'+LesPoids_Nprog+'" value=""></td></tr>');

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function On_Save_NProg(){
	//Recupération du nom du programme
	var Name_prog = document.getElementById("Name_Nprog");
 
	//Récupération de l'id du poids MAX
	var ID_POIDS_MAX = document.getElementById("idPoidsMax_Nprog");
 
	//Récupération du nombre de TR de la table déjà faite
	var Montableau = document.getElementById("Tableau_Data_Nprog");
	var NbLignes = Montableau.rows.length;
	var NbTR_Table1 = NbLignes - 1 ;
	alert(NbTR_Table1);
 
	//var TT_TR = NbTR_Table1 ;
	//alert(TT_TR);
 
	var TabSerie = new Array; 
	var TabRepete = new Array; 
	var TabPoids = new Array; 	
	var i = 0 ;
	for(i = 0; i <= NbTR_Table1;i++){
		//Verification de la saisi des séries
		var numSerie = "Serie_Nprog"+i ;
		alert(numSerie);
		var Serie_NProg = document.getElementById(numSerie).value ;
		alert(Serie_NProg);
		TabSerie[i] = Serie_NProg;
		alert(TabSerie);
		if(Serie_NProg == "" || isNaN(Serie_NProg)){
			alert("Verifier votre saisi");
			return false;
		}
 
	}
			$.ajax({
					type: "POST",  
					url: "TraiteDataNProg.php", 
					data: "Name_prog="+encodeURIComponent(Name_prog)+"&ID_POIDS_MAX="+encodeURIComponent(ID_POIDS_MAX)+"&TabSerie="+encodeURIComponent(TabSerie)+"&TabRepete="+encodeURIComponent(TabRepete)+"&TabPoids="+encodeURIComponent(TabPoids)+"&TT_TR="+encodeURIComponent(TT_TR)+"&rdm="+Math.random()+"",
					success: function(msg)
					{
						$("#display_tableau_AddSeries").prepend(msg);						
					}
			}); 
 
}

Et la encore il tourne 4 fois dans la boucle for ( quand il y a l'ajout de 1 ligne ) mais si il y a 4 lignes en plus il va tourner que 4 fois quand même...

Edit: OMG il ne tourne que 4 fois dans la boucle pourquoi ???! Pourtant dans "NbTR_Table1" il y a bien le bon nombre de ligne ! ( ex: si il y a 6 ligne il retourne 6 )

ReEdit: Il doit s'arrêter à 4 parce qu'il n'arrive pas à trouvé, soit la nouvelle ligné créé, soit ce qu'elle contient ? Donc il plante

(Désolé pour les multi post :/)

**Guignon** · 19/04/2013, 15h41

Il manquait les id dans les input....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#Tableau_Data_Nprog').append('<tr><td></td><td> <input type="text" id="'+LesSeries_Nprog+'" name="'+LesSeries_Nprog+'" value=""></td><td><input type="text" id="'+LesRepetes_Nprog+'"  name="'+LesRepetes_Nprog+'" value=""></td><td><input type="text" id="'+LesPoids_Nprog+'" name="'+LesPoids_Nprog+'" value=""></td></tr>');

SA FONCTIONNE !!

Merci beaucoup Andry !! Je pensais trop que mon script ne pouvait pas fonctionner... Et bien il faut garder confiance et aller de l'avant !

A la prochaine !!

**andry.aime** · 20/04/2013, 00h15

On s'en tape une bière

[AJAX] Ajout de ligne tableau dynamique

AJAX

Discussions similaires

Partager

Partager