Discussion :

[grialat]

Bonjour

je suis du genre a chercher et trouver la réponse de mes propres moyen, mais la j'ai pas beaucoup de temps c'est pour ça que c'est la 2em fois que je pose des questions sur le forum, sans vraiment avoir chercher comme je le fais habituellement. Donc je m'en excuse et j’espère que vous allez quand même m'aider.
Comme je commence a découvrir le JS je perd beaucoup de temps pour des truks facile.

Ici je voudrais ajouter une ligne dans un tableau HTML en cliquant sur un bouton, a vrai dire j'y arrive a ajouter cette ligne avec :

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
/* Ajout d'une ligne dans un Tableau */
function Ajout_Ligne(tableID)
{
	//alert("Ajout Ligne");
	var newRow = document.getElementById(tableID).insertRow(-1);
 
	if(tableID == 'objectifs1')
	{
		//alert("objectifs_autres");
		var newCell = newRow.insertCell(0);
		newCell.innerHTML = '<td align="center"><input type="checkbox" name="cellule[]" value=""></td>';
		newCell = newRow.insertCell(1);
		newCell.innerHTML = '<td align="center"><textarea cols="47%" name="libObjectif[]"></textarea></td>';
		newCell = newRow.insertCell(2);
		newCell.innerHTML = '<td align="center"><input type="radio" value="R" name="resultatObjectif[]"></td>';
		newCell = newRow.insertCell(3);
		newCell.innerHTML = '<td align="center"><input type="radio" value="P" name="resultatObjectif[]"></td>';
		newCell = newRow.insertCell(4);
		newCell.innerHTML = '<td align="center"><input type="radio" value="N" name="resultatObjectif[]"></td>';
		newCell = newRow.insertCell(5);
		newCell.innerHTML = '<td align="center"><textarea cols="40%" name="analyseecartObjectif[]"></textarea></td>';
	}

comme vous le voyez sur cette ligne il y a des boutons radios. eh bien si j'ajoute qu'une seul ligne il n'y a pas de problèmes mais des que j'en ajoute la deuxième il y a un résultat inattendu.
En effet les boutons radios des 2 lignes font comme si c’était de la même ligne et je peux choisir qu'une case (normalement le reste de la ligne c'est a dire les champs de texte doivent faire aussi la même chose mais c'est plus facile de remarquer sur des boutons radios).

Ca me parait plutôt logique car les nom sont les mêmes et il n' a pas d’incrémentation. (je peux aussi me tromper et la raison est peut être pas la).

quoi qu'il en soit le code est plus au moins trouver sur internet et j'ai juste modifier ce qu'il me fallait, donc bref comme je vient de dire plus haut suis pas un as en JS.


si quelqu’un a une solution a partager pour mon problème je lui serait vraiment reconnaissant.

merci d'avance.

[SpaceFrog]

=> passe par le DOM
regarde du coté de insertRow()

[SylvainPV]

Ca me parait plutôt logique car les nom sont les mêmes et il n' a pas d’incrémentation. (je peux aussi me tromper et la raison est peut être pas la).

Bon ben tu as trouvé tout seul le problème
Donc pour le résoudre, il faut donner des noms différents à tes input. Par exemple en incrémentant une variable.

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
 
/* Ajout d'une ligne dans un Tableau */
function Ajout_Ligne(tableID)
{
	//alert("Ajout Ligne");
 
        var table = document.getElementById(tableID);
	var newRow = table.insertRow(-1);
        var rowNumber = table.childNodes.length;
 
 
	if(tableID == 'objectifs1')
	{
		//alert("objectifs_autres");
		var newCell = newRow.insertCell(0);
		newCell.innerHTML = '<td align="center"><input type="checkbox" name="cellule'+rowNumber+'" value=""></td>';

Quelques conseils au passage :
-plutôt que alert() pour débugger, utilise l'API console et les outils de développement de ton navigateur. Ci-joint la doc pour Chrome : https://developers.google.com/chrome.../console?hl=fr

- plutôt que innerHTML, utilise toutes les fonctions de manipulation du DOM : http://javascript.developpez.com/tut...page=page_5#LV

- n'hésite pas à adapter tes fonctions pour simplifier le problème. Par exemple, il n'y a pas d'intérêt à mettre un code spécifique pour "objectifs1" dans ta fonction Ajout_Ligne. Il vaut mieux faire une fonction à part. Aussi au lieu d'utiliser 6 fois la fonction insertCell et de mettre plein de HTML dans ton code Javascript, essaie de trouver une meilleure solution comme clôner la ligne précédente, ou te servir d'une librairie de templating en Javascript

[Auteur]

Bonjour,

Tous les exemples d'insertion / suppression d'une ligne d'une table dans la FAQ :
http://javascript.developpez.com/faq...pt/?page=Table

et pour reprendre ce qu'on déjà écrit SpaceFrog et SylvainPV, innerHTML est à proscrire dans ce genre de cas.