[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.