Discussion :

[Guignon]

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]

Bonsoir,

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

A+.

[Guignon]

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]

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]

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]

Dans la page appelée

<table id="Table_NSeries">
<tr>
<td></td>

Vire les balises table ouvrante et fermante.

A+.