Discussion :

[sacados1]

Bonjour à tous,

Voilà j'aimerais savoir comment faire pour ajouter dynamiquement de morceau de tableau.

Je m'explique; j'ai le tableau suivant

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
 
<table id="galerie_cat" width="100%">
   <tr id="mon_premier_element">
	<td>
	   <table id="galerie_cat_no2" width="100%">
		<tr >
		   <td valign="top" width="150px"><img src="modules/galerie_membre/image_galerie/test.jpg" width="114px" height="150px" >
                    </td>
		    <td valign="top" style="padding-left:10px;">legende</td>
		    <td valign="top" width="5%"><img src="images/espace_membre/edit2.png"></td>
		     <td valign="top" width="5%"><img src="images/espace_membre/del.png"></td>
                  </tr>
	    </table>
	</td>
   </tr>
</table>

Voici donc le code et je voudrais ajouter de manière dynamique un élément <tr> au tableau id="galerie_cat" et dans ce tr serait logé comme dans le code ci-dessous les infos. (table id="galerie_cat_no2" etc...)

//edit : la suppression m'interesse aussi !!! de l'élément mon_premier_element

Merci d'avance de votre aide...

P.S: si mes explications ne sont pas claire n'hésitez pas à me demander de nouveau

[Auteur]

bonjour,

cf. http://www.developpez.net/forums/sho...d.php?t=334611

[sacados1]

Merci je vais tester donc!

[sacados1]

Bonsoir,

J'ai donc tester ! Pour la suppression pas de problème mon soucis se situe au niveau de l'ajout enfin visuellement cela s'ajoute mais ma fonction supprimer ne s'exécute pas comme il faut:

Le javascript :

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
46
 
<?
function supprimer_imagemembre(ligne2,tableau,compte,id)
			{
			alert(id);
			if(confirm('".GLM_SUP."'))
				{
				var ligne = document.getElementById(ligne2);
				document.getElementById(tableau).deleteRow(ligne.rowIndex);
				/* fonction ajax de suppression */
				var xmlhttp = getHTTPObject();
    			xmlhttp.open(\"GET\", 'modules/galerie_membre/ajax/supprime.php?id='+id);
				vider_cache(xmlhttp);
    			xmlhttp.onreadystatechange = function() 
					{
		  			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						if(xmlhttp.responseText.charAt(0)!=1)
							alert('".GLM_ERRSUP."');
						}
       				}
				xmlhttp.send(null);
				/*
				//Recomptage des lignes...
  				var tableau = document.getElementById(tableau);
  				var trs = tableau.rows;
  				var n = trs.length;
  				var i;
 				for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  					{
    				trs[i].cells[0].innerHTML = trs[i].rowIndex;
  					}
				*/
				document.getElementById(compte).innerHTML=parseInt(document.getElementById(compte).innerHTML)-1;
				}
			}
		function test(image,id)
			{
			alert('id='+id+'  image='+image);
			var tableau = document.getElementById('galerie_cat');
  			var ligne = tableau.insertRow(-1); 
 
  			Cell    		= ligne.insertCell(0);
			Cell.id 		= 'galerie_membre_'+id;
  			Cell.innerHTML	= '<table id=\"galerie_cat_no2\" width=\"100%\"><tr><td valign=\"top\" width=\"150px\"><img src=\"modules/galerie_membre/image_galerie/mini_'+image+'\"></td><td valign=\"top\" style=\"padding-left:10px;\">&nbsp;</td><td valign=\"top\" width=\"5%\"><img src=\"images/espace_membre/del.png\" style=\"cursor:pointer;\" title=\"".GLM_SUPIN2."\" alt=\"".GLM_SUPIN2."\" onclick=\"supprimer_imagemembre(\'galerie_membre_'+id+'\',\'galerie_cat\',\'nb_imagegalerie\',id);\"></td></tr></table>';
			}
?>

test() est la fonction d'ajout.

Se reporter au code de mon premier post pour voir le code html.

Merci d'avance à vous!

[Auteur]

innerHTML pour insérer un tableau dans une cellule (qui condiendra 2 images), ce n'est pas ce qu'il y a de mieux

Utilise les fonctions du DOM : createElement. Et je pense que tu peux te passer de l'insertion d'un tableau dans une cellule pour présenter ta page et utiliser des feuilles de styles.

[sacados1]

Oui c'est clair !!!

Tu as raison j'ai utilisé un style et punaise ben l'insertion et la suppression devienne un jeu d'enfant je fait juste un hidden=true et pour les création des innerHTML et hop c'est ok !

Merci de ton aide elle m'a permius d'apprendre des choses sur les tableau et le DOM merci à toi

Bonnne continuation !

[Auteur]

content pour toi si ça marche

Mais quand je te disais d'utiliser les méthodes du DOM, je fais allusion à quelque chose dans ce genre :

Code javascript :

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
 
function test(image,id)
{
alert('id='+id+'  image='+image);
var tableau = document.getElementById('galerie_cat');
var ligne = tableau.insertRow(-1); 
 
var Cell = ligne.insertCell(0);
Cell.id = 'galerie_membre_'+id;
 
 
var imgCell = document.createElement("img");
imgCell.src = "modules/galerie_membre/image_galerie/mini_"+image;
imgCell.style.float="left";
 
/* etc.......*/
 
Cell.appendChild(imgCell);
}

[deY!]

Je supporte pas innerHTML, oriente toi vers createElement, removeChild, et autre.... insertRow aussi comme le dit Auteur...

[sacados1]

Oui c'est sur que c'est mieux je le reconnais mais utiliser cela est très lourd !!!!

Je me suis orienter vers les div qui se créé mais aussi avec la méthode innerHTML comment créer ces div avec votre méthode ?

Merci de votre écoute.

[deY!]

Code :

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

1
2
3
4
var mycontener = document.getElementById('myelement'); //ou tout autre moyen de recup un NOEUD qui doit receptionner les nouveaux element
var mydiv = document.createElment('div');
mydiv.setAttribute('class', 'myclass');
mycontener.appendChild('mydiv');

Attention appendChild rajoute à la suite... si tu veux remplacer, tu as replaceChild, si tu veux supprimer et rajouter, tu dois faire removeChild puis appendChild

[Auteur]

Code javascript :

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

1
2
 
mydiv.setAttribute('class', 'myclass');

Simple curiosité setAttribute est reconnu par tous les navigateurs ?


Sinon (équivalent à la ligne de code ci-dessus):

Code javascript :

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

1
2
 
mydiv.className = "myclass";

[deY!]

Sur IE ça ne fonctionne pas c'est vrai... Mais IE c'est un peu de la daube en boite

Je sors d'une longue periode de dev Javascript avec FF et SVGViewer qui eux le comprenne, même le DOM 2 ... bref... c'est pas le sujet...

[sacados1]

Merci à tous pour vos réponse grâce à vous j'ai pu comprendre pas mal de mécanisme !!!

J'ai donc terminé ce que je voulais faire et je suis trés content.

Merci à tous!!!!