Table DOM fonctionne sous FF mais pas IE7

**SPACHFR** · 27/08/2009, 16h27

Bonjour,

J'ai fais un petit exemple pour tester la création de table via DOM afin de me former sur cette technique.
La table est bien affiché sous FF (3) mais je n'ai rien sous IE7

Voici mon code (un copier coller si vous souhaité le tester).
Je ne vois pas ce qui cloche.....
Pourriez m'aider ?

Merci

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
 
<html>
<head>
<script>
function tst() {
	var e= document.getElementById('d2');
	var MyTab = document.createElement('table');
	MyTab.style.backgroundColor ="red";
	MyTab.style.border="4";
	MyTab.id ="EventTable";
	var tr = document.createElement("tr");
	var td = document.createElement("td")
	td.appendChild( document.createTextNode("Cel1") );
	tr.appendChild( td );
	MyTab.appendChild(tr);
	td = document.createElement("td");
	td.appendChild( document.createTextNode("cel2") );
	tr.appendChild( td );
	MyTab.appendChild(tr);
	e.appendChild(MyTab);
}
</script>
</head>
<body>
<div id="d1">
<input type="button" value="click" onclick="tst();"/>
</div>
<div id="d2">
</div>
</body>
</html>

**andry.aime** · 27/08/2009, 16h41

Salut,

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
<html>
<head>
<script type="text/javascript">
function tst() {
	var MyTab = document.createElement('table');
	MyTab.style.backgroundColor ="red";
	MyTab.style.border="4";
	MyTab.id ="EventTable";
	var tr = MyTab.insertRow(-1);
	var td = tr.insertCell(0);
	td.innerHTML="Cel1";
	td = tr.insertCell(1);
	td.innerHTML="Cel2";
	document.getElementById('d2').appendChild(MyTab);
}
</script>
</head>
<body>
<div id="d1">
<input type="button" value="click" onclick="tst();"/>
</div>
<div id="d2">
</div>
</body>
</html>

**SPACHFR** · 27/08/2009, 16h53

MERCI andry.aime, ce code fonctionne parfaitement.
J'ai pris le temps de le lire afin de le comprendre, et j'ai découvert des méthodes (je ne sais pas si le termes est approprié) que je ne connaissais pas.

ex.

Code :

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

1
2
3
 
var tr = MyTab.insertRow(-1);
	var td = tr.insertCell(0);

Je comprend bien leur fonctionnement mais aurais-tu un lien me permettant d'avoir la liste de ces "méthodes", car j'ai pas mal cherché avant de poster ma demande mais sans trouver.

**SPACHFR** · 27/08/2009, 17h49

Bon je crois que j'ai pas tout compris....

Pourquoi à ton la valeur "-1" sur cette instruction ?

Code :

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

1
2
 
var tr = MyTab.insertRow(-1);

Merci

**kernelfailure** · 27/08/2009, 18h32

Autre méthode :

Pour que ton code fonctionne, il aurait fallu ajouter un élément TBODY et y encapsuler ton ou tes TR.

TBODY : Requis par IE, fonctionne sous FF.

N.B. : Tu ajoutes 2 fois le même TR de manière assez curieuse... Pour une ligne pas besoin. Pour deux lignes, tu aurais du créer un nouvel élément.

**SPACHFR** · 28/08/2009, 09h23

Salut kernelfailure

, j'ai bien vue cette balise "TBODY" mais je n'ai pas saisie l'intérêt de celle-ci.

Le code exemple fourni par andry.aime me plait bien au niveau de la syntaxe. La difficulté est de trouver une documentation afin de comprendre véritablement cette syntaxe notamment celle-ci

Code :

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

1
2
 
var tr = MyTab.insertRow(-1);

Table DOM fonctionne sous FF mais pas IE7

JavaScript

Vue hybride

Discussions similaires

Partager

Partager