[DOM] DOM : difficult� d'affichage

**tusssss** · 27/01/2009, 09h45

J'ai �crit un code assez simple qui me permet de construire un tableau en DOM, dans une boucle.

Cependant seulement mes premiers �l�ments viennent s'afficher, la boucle se refait bien pour le bon nombre d'�l�ments, cependant ces derniers ne viennent pas s'ajouter au reste du tableau, je pense qu'il doit s'agir d'une erreur au moment ou j'assigne le nom des vraiables, mais je n'en suis pas sur...

Voici mon code, l�g�rement simplifi� :

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
47
48
49
50
51
52
53
54
 
        var nouveauDiv=document.createElement('DIV');
	var tableau=document.createElement('table');
	var tblBody = document.createElement('tbody');
	for (i=0;i<Liste.length;i++)
	{		
		var tr=document.createElement('tr');
		var td=document.createElement('td');
		var nouveauSpan=document.createTextNode(Liste[i]);
		td.appendChild(nouveauSpan);
		td.style.width=250+"px";
		setStylePourElement(td,"TdDiv");
		td.onmouseover=divOnMouseOver;
    	td.onmouseout=divOnMouseOut;
		td.onclick=divOnClick;
 
		var borderLeftRight=3;
  		var borderTopBottom=3;
 
		td.style.borderRight=borderLeftRight+"px outset";
  		td.style.borderLeft=borderLeftRight+"px outset";
  		td.style.borderTop=borderTopBottom+"px outset";
  		td.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td);
		i++;
		if (Liste[i])
		{
			var td2=document.createElement('td');
			var nouveauSpan2=document.createTextNode(Liste[i]);
			td2.appendChild(nouveauSpan2);
			td2.style.width=250+"px";
			setStylePourElement(td2,"TdDiv");
			td2.onmouseover=divOnMouseOver;
    		td2.onmouseout=divOnMouseOut;
			td2.onclick=divOnClick;
		}
		else
		{
			var td2=document.createElement('td');
			td2.value="&nbsp;";
		}
		td2.style.borderRight=borderLeftRight+"px outset";
  		td2.style.borderLeft=borderLeftRight+"px outset";
  		td2.style.borderTop=borderTopBottom+"px outset";
  		td2.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td2);
		tblBody.appendChild(tr);
	}
	tableau.appendChild(tblBody);
	nouveauDiv.appendChild(tableau);
	_completeDiv.appendChild(nouveauDiv);
	_completeDiv.height=30*i+4;
	showCompleteDiv(_completeDiv);
}

Merci pour votre aide par avance.

**le_chomeur** · 27/01/2009, 09h56

le script �tant incomplet cela risque d'�tre difficile , car a premi�re vue pas de soucis de code ...

aurais tu un exemple en ligne ??

ou le code complet

**tusssss** · 27/01/2009, 10h21

Edit� avec la fonction en entier, le code complet est tr�s long et indigeste (car pas comment�, mea culpa...)

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
47
48
49
50
51
52
53
54
55
56
57
function OuvrirMenu(Liste,color)
	creeAutocompletionDiv(color);
	var nouveauDiv=document.createElement('DIV');
	setStylePourElement(nouveauDiv,"AutoCompleteDiv");
	var tableau=document.createElement('table');
	var tblBody = document.createElement('tbody');
	for (i=0;i<Liste.length;i++)
	{		
		var tr=document.createElement('tr');
		var td=document.createElement('td');
		var nouveauSpan=document.createTextNode(Liste[i]);
                alert(Liste[i]);
		td.appendChild(nouveauSpan);
		td.style.width=250+"px";
		setStylePourElement(td,"TdDiv");
		td.onmouseover=divOnMouseOver;
    	td.onmouseout=divOnMouseOut;
		td.onclick=divOnClick;
 
		var borderLeftRight=3;
  		var borderTopBottom=3;
 
		td.style.borderRight=borderLeftRight+"px outset";
  		td.style.borderLeft=borderLeftRight+"px outset";
  		td.style.borderTop=borderTopBottom+"px outset";
  		td.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td);
		i++;
		if (Liste[i])
		{
			var td2=document.createElement('td');
			var nouveauSpan2=document.createTextNode(Liste[i]);
			td2.appendChild(nouveauSpan2);
			td2.style.width=250+"px";
			setStylePourElement(td2,"TdDiv");
			td2.onmouseover=divOnMouseOver;
    		td2.onmouseout=divOnMouseOut;
			td2.onclick=divOnClick;
		}
		else
		{
			var td2=document.createElement('td');
			td2.value="&nbsp;";
		}
		td2.style.borderRight=borderLeftRight+"px outset";
  		td2.style.borderLeft=borderLeftRight+"px outset";
  		td2.style.borderTop=borderTopBottom+"px outset";
  		td2.style.borderBottom=borderTopBottom+"px outset";
		tr.appendChild(td2);
		tblBody.appendChild(tr);
	}
	tableau.appendChild(tblBody);
	nouveauDiv.appendChild(tableau);
	_completeDiv.appendChild(nouveauDiv);
	_completeDiv.height=30*i+4;
	showCompleteDiv(_completeDiv);
}

Color : contient un code couleur en h�xa

Liste est un tableau contenant diff�rents textes et le alert(Liste[i]) me retourne bien au fur et � mesure de la boucle les textes que je souhaite afficher.

Cependant avant je cr�ais un tableau diff�rent � chaque ligne et cela fonctionnait, depuis que j'ai sorti la cr�ation de tableau de la boucle, pour pouvoir plus facilement aligner mon menu, il n'y a plus que le premier tr qui s'affiche...

Code de la fonction qui pourrait bugger aussi, mais je ne vois pas pourquoi :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
function showCompleteDiv(Div)
{
  Div.style.visibility="visible";
}

**E.Bzz** · 27/01/2009, 10h38

Bonjour,
y a un truc de bizarre : � cause de cette condition

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (Liste[i])

tu risques de te retrouver avec des lignes � 1 td et d'autres � 2 td.
La structure de ton tableau n'est pas correcte dans ce cas ...

EDIT : Arf, non, y a un else, donc toujours 2 td

A+

**tusssss** · 27/01/2009, 10h46

Ah j'ai peut-�tre trouv� :

J'ai dans mon code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var td2=document.createElement('td');
td2.value="&nbsp;";

Mais le td2.value, doit �tre incorrect et donc me cr�er un probl�me puisque parfois 1 td et parfois 2... Ca vient peut-�tre de ca, je vais essayer de modifier cela.

**E.Bzz** · 27/01/2009, 10h58

Envoy� par tusssss

Mais le td2.value, doit �tre incorrect

C'est surtout qu'un td n'a pas de value

=> createTextNode(" ")

A+

**tusssss** · 27/01/2009, 11h03

Envoy� par E.Bzz

C'est surtout qu'un td n'a pas de value

=> createTextNode(" ")

A+

C'est ce que je voulais dire.

Modifi�, mais ne fonctionne toujours pas.

Bout de code remplac� :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
else
		{
			var td2=document.createElement('td');
			var nouveauSpan2=document.createTextNode("&nbsp;");
			td2.appendChild(nouveauSpan2);
			td2.style.width=250+"px";
			setStylePourElement(td2,"TdDiv");
		}

**E.Bzz** · 27/01/2009, 11h05

Envoy� par tusssss

Modifi�, mais ne fonctionne toujours pas.

C'est qu'il y a autre chose, mais c'�tait � corriger de toutes fa�ons ...

A+

**tusssss** · 27/01/2009, 11h13

Compl�tement d'accord, je repars � la recherche de l'autre bug, il parait logique que celui-ci n'�tait pas le bug principal puisque cette partie du code n'est utilis�e que si j'ai un nobre impair de texte dans la liste, alors que ce code ne fonctionne pas non plus pour les listes avec un nombre pair d'�l�ments...

Merci pour l'aide. Si vous voyez quelque chose n'h�sitez pas.

**tusssss** · 27/01/2009, 11h24

Le fait d'ajouter plusieurs fois le m�me "tr" ne peux il pas �tre g�nant ?

Ne faut-il pas d�truire le tr apr�s l'avoir ins�rer dans le tableau, pour pouvoir cr�er une ligne apr�s tout en conservant le tableau ainsi cr�� au fur et � mesure???

**E.Bzz** · 27/01/2009, 11h50

Envoy� par tusssss

Le fait d'ajouter plusieurs fois le m�me "tr" ne peux il pas �tre g�nant ?

Normalement, non.
Mais d�clarer des variables locales dans une boucle, normalement, si ( = multi-d�clarations)

Sinon, as-tu essay� d'utiliser les instructions sp�cifiques aux tableaux, comme indiqu� dans la FAQ ?

A+

**tusssss** · 27/01/2009, 12h06

Envoy� par E.Bzz

Normalement, non.
Mais d�clarer des variables locales dans une boucle, normalement, si ( = multi-d�clarations)

Sinon, as-tu essay� d'utiliser les instructions sp�cifiques aux tableaux, comme indiqu� dans la FAQ ?

A+

Non pas essay� cela, puisque j'arrivais � faire fonctionner auparavant cela comme je voulais, j'essaye cela en d�but d'apr�s-midi, merci pour l'aide.

En effet, le probl�me vient surement de la multid�claration...Go pour tout refaire avec des insertrow et insertcell...

Merci encore.

**E.Bzz** · 27/01/2009, 12h27

Envoy� par tusssss

En effet, le probl�me vient surement de la multid�claration...Go pour tout refaire avec des insertrow et insertcell...

Avant de tout refaire, essaye quand m�me de virer les d�clarations (var) des boucles ...

A+

**tusssss** · 27/01/2009, 15h46

Bon maintenant �a marche, mais j'ai vraiment bidouill�, je ne sais pas comment j'ai fait... Dommage. Un coup de chance, j'aime pas trop �a.

En fait j'ai tout supprim� mes modifs et je les ai refaites en partant du m�me truc qui fonctionnais toujours avec les td et �a a fonctionn�.

**E.Bzz** · 27/01/2009, 15h53

Envoy� par tusssss

Bon maintenant �a marche, mais j'ai vraiment bidouill�, je ne sais pas comment j'ai fait... Dommage.

C'est encore plus myst�rieux pour nous

**tusssss** · 27/01/2009, 16h34

Finalement, je me suis bien fatigu� pour rien, j'ai re rajout� une ligne que j'avais enlev� dans mon nouveau code, et je me suis retrouv� avec le m�me bug, il ne vient donc pas de la conception du tableau en lui m�me, mais de cette ligne :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

setStylePourElement(nouveauDiv,"AutoCompleteDiv");

J'avais assign� cette classe au tableau entier plutot qu'au td, et du coup, j'avais limit� la taille de mon div, d'ou le fait que seulement la ligne s'affichait, j'�tais pourtant persuad� d'avoir affubl� les td de ce style et non mon div entier

D�sol� pour la recherche. Bonne soir�e et merci une nouvelle fois.

[DOM] DOM : difficult� d'affichage

JavaScript

Discussions similaires

Partager

Partager