[DOM] Modifier la taille d'une cellule d'un tableau

**DoubleU** · 24/04/2008, 10h07

Est-ce que c'est moi qui devient fou ou est-ce qu'il y a une raison qui fait que le code suivant n'affiche rien sous ie (6 et 7):

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
	</head>
 
	<body>
		<script type="text/javascript">
 
			var table = document.createElement("table");
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			var td2 = document.createElement("td");
 
			tr.appendChild(td);
			tr.appendChild(td2);
			table.appendChild(tr);
			document.body.appendChild(table);
 
			td.style.backgroundColor="red";
			td.style.width = "100px";
			td.style.height = "20px";
 
			td2.style.backgroundColor="blue";
			td2.style.width = "50px";
			td2.style.height = "20px";
 
		</script>
	</body>
 
</html>

Alors que dans FF on a bien le résultat attendu et que dans le module IE Developer Toolbar, on voit bien les éléments qui sont ajoutés au dom avec leurs bonnes dimensions...

**Matthieu2000** · 24/04/2008, 10h56

enleve les px.

**E.Bzz** · 24/04/2008, 10h58

Bonjour,
as-tu essayé d'inverser l'ordre d'ajout dans la page

Code :

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

1
2
3
4
document.body.appendChild(table);
table.appendChild(tr);
tr.appendChild(td2);
tr.appendChild(td);

?

A+

**DoubleU** · 24/04/2008, 11h03

Matthieu2000 >> ca marche pas mieux, et sous FF ca fait des carrés de 1x1

E.Bzz >> Meme résultat. Je crois que j'ai du tester a peu prêt tous les ordres possibles en plus lol

**E.Bzz** · 24/04/2008, 11h05

Alors fait de ton script une fonction (en conservant l'ordre que je t'ai donné) que tu appelleras sur le onload du body.
Au moins, le document sera complètement créé au moment de l'exécution ...

A+

**DoubleU** · 24/04/2008, 11h17

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
			<script type="text/javascript">
			function test(){	
				var table = document.createElement("table");
				var tr = document.createElement("tr");
				var td = document.createElement("td");
				var td2 = document.createElement("td");
 
				document.getElementById("dd").appendChild(table);
				table.appendChild(tr);
				tr.appendChild(td2);
				tr.appendChild(td);
 
				td.style.backgroundColor="red";
				td.style.width = "100px";
				td.style.height = "20px";
 
				td2.style.backgroundColor="blue";
				td2.style.width = "50px";
				td2.style.height = "20px";
			}
		</script>
 
 
	</head>
 
	<body>
		<div id="dd"></div>
		<input type="button" onclick="test()" value="go" />
	</body>
 
</html>