Table DOM fonctionne sous FF mais pas IE7

Version imprimable

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:

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>

Salut,

Code:

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>

27/08/2009, 16h53
SPACHFR
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:

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.

:merci:
27/08/2009, 17h49
SPACHFR
Bon je crois que j'ai pas tout compris....

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

1 2 var tr = MyTab.insertRow(-1);
Merci
27/08/2009, 18h32
kernelfailure

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.
28/08/2009, 09h23
SPACHFR
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:

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

Bon filialement en reprenant le code d'andry.aime j'ai "pondu" ce code. avec une fonction d'ajout de Row.
Je me retrouve avec le même problème, la fonction d'ajout de Row fonctionne sous FF et pas sous IE7.
J'ai vraiment l'impression de passer à coté de quelque chose mais je ne vois pas quoi

Code:

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

28/08/2009, 10h01
andry.aime

Re,
Enlève le document.getElementById('EventTable').appendChild(tr);
Cette instruction crée déjà une ligne et l'ajoute dans ton tableau:

Citation:

var tr = MyTab.insertRow(-1);
28/08/2009, 10h11
SPACHFR

Effectivement ça marche tout de suite mieux.....
J'avais en partie la réponse dans une FAQ ( http://javascript.developpez.com/faq/?page=Table) , mais grâce à ta dernière intervention j'ai COMPRIS :ccool:

Reste à trouve le contraire de inserRow() et je devrais pouvoir commencer à bricoler

MERCI
28/08/2009, 10h13
Bovino

Citation:

Envoyé par SPACHFR

Reste à trouve le contraire de inserRow()

Code:

deleteRow();

;)
28/08/2009, 10h57
SPACHFR

Merci,
Le deleteRow() fonctionne, encore quelques questions.

Lors d'un deleteRow(), l'index du tableau est-il géré ou faut-il le faire ?
Comment connaitre le nombre de Row d'un tableau ?

Merci
28/08/2009, 11h01
Bovino

Il semble que tu confondes un tableau JavaScript (objet Array) et un tableau HTML (balise table).
En HTML, un tableau n'a pas d'index...
Pour connaitre le nombre de lignes :

Code:

var nbLigne = document.getElementById('ma_table').getElementsByTagName('tr').length;

en filtrant éventuellement les lignes contenant des th.
28/08/2009, 11h11
BaBeuH

Je vais chipoter, mais je dirai pour obtenir le nombre de lignes "utiles" d'un tableau (si celui-ci est bien construit) :

Code:

var nbLigne = document.getElementById('ma_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;

Sans avoir à filtrer les éventuels TH, si le tableau est "bien" construit avec un THEAD pour la ligne d'entête, un TBODY pour le contenu "utile", voire un TFOOT...

Bien pratique le TBODY pour gérer les tris ou autre manipulation des row sans avoir à se soucier de la ligne d'entête (qui est supposée être encapsulée dans le THEAD).
28/08/2009, 11h22
Bovino

Effectivement, c'est du chipotage :)
D'autant qut tu sembles oublier qu'un tableau "bien construit" peut avoir des th dans le tbody, voire plusieurs tbody ;)
28/08/2009, 11h34
BaBeuH

Effectivement, tu as raison, un chipotage partout ;) :lol:
28/08/2009, 11h58
SPACHFR

Quelle différence entre un tableau JavaScript et un tableau HTML ?
j'avais pu vue : "En HTML, un tableau n'a pas d'index..."

J'avoue que là c'est une révélation pour moi. Il me manque probablement pas mal de notions de bases (je fais de l'auto formation), mais je pensais jusqu'à maintenant qu'un tableau était un tableau sans différenciation de la façon de le créer.
De plus quel est l'intérêt de TBODY ?