[AJAX] Ajout de ligne tableau dynamique
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:
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:
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:
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:
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
