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);

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

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 :

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

**andry.aime** · 28/08/2009, 10h01

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

var tr = MyTab.insertRow(-1);

**SPACHFR** · 28/08/2009, 10h11

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

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

MERCI

**Bovino** · 28/08/2009, 10h13

Envoyé par SPACHFR

Reste à trouve le contraire de inserRow()

Code :

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

deleteRow();

**SPACHFR** · 28/08/2009, 10h57

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

**Bovino** · 28/08/2009, 11h01

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 :

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

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

en filtrant éventuellement les lignes contenant des th.

**BaBeuH** · 28/08/2009, 11h11

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

Code :

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

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

**Bovino** · 28/08/2009, 11h22

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

**BaBeuH** · 28/08/2009, 11h34

Effectivement, tu as raison, un chipotage partout

**SPACHFR** · 28/08/2009, 11h58

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 ?

Table DOM fonctionne sous FF mais pas IE7

JavaScript

Discussions similaires

Partager

Partager