tableau dynamique qui n'affiche rien

Version imprimable

Bonsoir à tous,
J'ai fait un petit script afin de me familiariser avec les tableaux dynamiques en js.
Seulement le code n'affiche rien. J'ai pourtant bien créer une ligne et des cellules et utiliser la propriété innerHTML pour écrire dans les cellules.

Voici mon code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
 
//Constructeur de l'objet Reservation
function Reservation(leNomClient, leNomHotel, laDateArrivee, leNbJours){
   this.nomClient = leNomClient;
   this.hotel = leNomHotel;
   this.dateArrivee =laDateArrivee;
   this.nbJours = leNbreJours;
 
//On crée les réservations
var reservation1 = new Reservation("MATTER", "Central Hotel", "22/03/2005", "2");
var reservation2 = new Reservation("HEITZ", "Hôtel LA MARMOTTE", "12/03/2005", "3");
var reservation3 = new Reservation("MATTER", "Hôtel-Restaurant IVOIRE", "12/04/2005", "2");
var reservation4 = new Reservation("DECKER", "Hôtel du PARC", "27/03/2005", "1");
var reservation5 = new Reservation("EDEL", "Hôtel du PARC", "21/03/2005", "2");
var reservation6 = new Reservation("MULLER", "Central Hotel", "20/03/2005", "2");
var reservation7 = new Reservation("WALTER", "Hôtel-Restaurant IVOIRE", "03/04/2005", "3");
var reservation8 = new Reservation("MEYER", "Central Hotel", "29/03/2005", "2");
var reservation9 = new Reservation("MOREL", "Hôtel SOLANA", "02/04/2005", "3");
var reservation10 = new Reservation("WALTER", "Central Hotel", "16/03/2005", "2");
 
//Création d'un tableau Array
var lesReservation = new Array;
lesReservation[0] = reservation1;
lesReservation[1] = reservation2;
lesReservation[2] = reservation3;
lesReservation[3] = reservation4;
lesReservation[4] = reservation5;
lesReservation[5] = reservation6;
lesReservation[6] = reservation7;
lesReservation[7] = reservation8;
lesReservation[8] = reservation9;
lesReservation[9] = reservation10;
 
//Fonction remplirTab
function remplirTab() {
   leTab = document.getElementById("main");
   nbReservation = lesReservation.lenght;
 
      for (i=0;i<nbReservation;i++) {
	     laLigne = leTab.insertRow(-1); //creation d'une ligne du tableau html
		 laCellule = laLigne.insertCell(-1); //Creation d'une cellule dans une ligne
		 laCellule.innerHTML = lesReservation[i].nomClient; //On écrit dans la cellule avec lapropriété innerHTML
		 laCellule = laLigne.insertCell(-1); //Creation d'une 2ième cellule dans une ligne
		 laCellule.innerHTML = lesReservation[i].hotel;
	     laCellule = laLigne.insertCell(-1); //Creation d'une 3ième cellule dans une ligne
		 laCellule.innerHTML = lesReservation[i].dateArrivee;
	     laCellule = laLigne.insertCell(-1); //Creation d'une 4ième cellule dans une ligne
		 laCellule.innerHTML = lesReservation[i].nbJours;
		 }
	  }
 
</script>
</head>
 
<body onload="remplirTab()">
 
<table width="600" cellpadding="0" cellspacing="0" border="1">
<caption align="center" valign="bottom"> tableau des reservations</caption>
<col width="200"> <col width="200"> <col width="200"> <col width="200">
 
<thead></thead>
<tbody id="main"> 
<tr>
<th>nom client</th>
<th>hotel</th>
<th>date d'arrivee</th>
<th>Durée du séjour</th>
</tr>
</tbody>
 
</table>
</body>

Merci à toute personne qui voudra m'éclaircir sur mes erreurs.

Bonne soirée

28/03/2010, 19h39
Invité

salut,

je pige pas trop pourquoi tu fais aussi compliqué si tu débutes.
j'imagine que t'as quand même entendu parler de firebug! (sinon, ben maintenant c'est le cas :mrgreen:)

Code:

nbReservation = lesReservation.lenght;//ici, c'est length (le t avant le h...)

les insertRow sur le DOM (element main) ca me parait suspect. Mais bon, pe que je suis simplement ignorant...
28/03/2010, 20h14
SpaceFrog

Manque un } pour la première fonction ...
je ne vois pas l'intéret de créer les reservations puis passer par des arrays...

Re bonsoir,
J'ai modifié mon code mais celui ne répond toujours pas. Est ce que mon id est bien placé et reconnu par la fonction getElementById ?

Je vous transmets le code :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
 
//Constructeur de l'objet Reservation
function Reservation(leNomClient, leNomHotel, laDateArrivee, leNbJours){
   this.nomClient = leNomClient;
   this.hotel = leNomHotel;
   this.dateArrivee =laDateArrivee;
   this.nbJours = leNbJours;
   }
//On crée un tableau pour les réservations
var laReservation = new Array;
   reservation1 = new Reservation("MATTER", "Central Hotel", "22/03/2005", "2");
   reservation2 = new Reservation("HEITZ", "Hôtel LA MARMOTTE", "12/03/2005", "3");
   reservation3 = new Reservation("MATTER", "Hôtel-Restaurant IVOIRE", "12/04/2005", "2");
   reservation4 = new Reservation("DECKER", "Hôtel du PARC", "27/03/2005", "1");
   reservation5 = new Reservation("EDEL", "Hôtel du PARC", "21/03/2005", "2");
   reservation6 = new Reservation("MULLER", "Central Hotel", "20/03/2005", "2");
   reservation7 = new Reservation("WALTER", "Hôtel-Restaurant IVOIRE", "03/04/2005", "3");
   reservation8 = new Reservation("MEYER", "Central Hotel", "29/03/2005", "2");
   reservation9 = new Reservation("MOREL", "Hôtel SOLANA", "02/04/2005", "3");
   reservation10 = new Reservation("WALTER", "Central Hotel", "16/03/2005", "2");
 
 
 
//Fonction remplirTab
function remplirTab() {
   leTab = document.getElementById("main");
   nbReservation = laReservation.lenght;
 
      for (i=0;i<nbReservation;i++) {
	     laLigne = leTab.insertRow(-1); //creation d'une ligne du tableau html
		 laCellule = laLigne.insertCell(-1); //Creation d'une cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].nomClient; //On écrit dans la cellule avec lapropriété innerHTML
		 laCellule = laLigne.insertCell(-1); //Creation d'une 2ième cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].hotel;
	     laCellule = laLigne.insertCell(-1); //Creation d'une 3ième cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].dateArrivee;
	     laCellule = laLigne.insertCell(-1); //Creation d'une 4ième cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].nbJours;
		 }
	  }
 
</script>
</head>
 
<body onload="remplirTab()">
 
<table width="600" cellpadding="0" cellspacing="0" border="2">
<caption align="center" valign="bottom"> tableau des reservations</caption>
<col width="200"> <col width="200"> <col width="200"> <col width="200">
 
<thead></thead>
  <tbody id="main"> 
   <tr>
      <th>nom client</th>
      <th>hotel</th>
      <th>date d'arrivee</th>
      <th>Durée du séjour</th>
   </tr>
  </tbody>  
 
</table>
</body>
 
</html>

Si quelqu'un veut bien m'aider je l'en remercie vivement

Bonsoir.

Exemple :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Document sans nom</title>
    <style>
        body {
            font-family:sans-serif;
            font-size:medium;
        }
        .reservation {
            position:relative;
            width:inherit;
            margin:12px auto;
            padding:0px;
            background-color:#F5F5F5;
            border-collapse:collapse;
            border:1px solid black;
        }
        .reservation caption {
            margin-bottom:12px;
            font-family:serif;
            font-size:2.0em;
        }
        .reservation thead tr th {
            padding:6px;
            text-align:center;
            background-color:#FFE7BA;
            border:thin solid grey;
        }
        .reservation thead tr th.client {
            width:150px;
        }
        .reservation thead tr th.hotel {
            width:250px;
        }
        .reservation thead tr th.date {
            width:100px;
        }
        .reservation thead tr th.jours {
            width:100px;
        }
        .reservation tbody tr td {
            padding:6px;
            border:thin solid grey;
        }
    </style>
    <script>
 
        //Constructeur de l'objet Reservation
        function Reservation(client, hotel, date, jours){
            this.client = client;
            this.hotel = hotel;
            this.date =date;
            this.jours = jours;
        }
 
        //On crée les réservations
        var tabReservation = [];
 
        tabReservation[0] = new Reservation("MATTER", "Central Hotel", "22/03/2005", "2");
        tabReservation[1] = new Reservation("HEITZ", "Hôtel LA MARMOTTE", "12/03/2005", "3");
        tabReservation[2] = new Reservation("MATTER", "Hôtel-Restaurant IVOIRE", "12/04/2005", "2");
        tabReservation[3] = new Reservation("DECKER", "Hôtel du PARC", "27/03/2005", "1");
        tabReservation[4] = new Reservation("EDEL", "Hôtel du PARC", "21/03/2005", "2");
        tabReservation[5] = new Reservation("MULLER", "Central Hotel", "20/03/2005", "2");
        tabReservation[6] = new Reservation("WALTER", "Hôtel-Restaurant IVOIRE", "03/04/2005", "3");
        tabReservation[7] = new Reservation("MEYER", "Central Hotel", "29/03/2005", "2");
        tabReservation[8] = new Reservation("MOREL", "Hôtel SOLANA", "02/04/2005", "3");
        tabReservation[9] = new Reservation("WALTER", "Central Hotel", "16/03/2005", "2");
 
        //Fonction remplirTab
        function remplirTab() {
            leTab = document.getElementById("main");
            nbReservation = tabReservation.length;
 
            for (var i = 0; i < nbReservation; i++) {
                laLigne = leTab.insertRow(-1); //creation d'une ligne du tableau html
                laCellule = laLigne.insertCell(-1); //Creation d'une cellule dans une ligne
                laCellule.innerHTML = tabReservation[i].client; //On écrit dans la cellule avec lapropriété innerHTML
                laCellule = laLigne.insertCell(-1); //Creation d'une 2ième cellule dans une ligne
                laCellule.innerHTML = tabReservation[i].hotel;
                laCellule = laLigne.insertCell(-1); //Creation d'une 3ième cellule dans une ligne
                laCellule.innerHTML = tabReservation[i].date;
                laCellule = laLigne.insertCell(-1); //Creation d'une 4ième cellule dans une ligne
                laCellule.innerHTML = tabReservation[i].jours;
            }
        }
    </script>
</head>
<body onload="remplirTab()">
    <table class="reservation">
        <caption>Tableau des réservations</caption>
        <thead>
            <tr>
                <th class="client">Client</th>
                <th class="hotel">Hôtel</th>
                <th class="date">Date d'arrivée</th>
                <th class="jours">Durée du séjour</th>
            </tr>
        </thead>
        <tbody id="main"></tbody>
    </table>
</body>
</html>

29/03/2010, 08h19
rimbaut

Merci danielhagnoul pour ton aide. J'ai compris et bonne journée

length et pas lenght ( déja relevé ...)

ensuite tu crées un array( enfin tu as fait une tentative ...

Code:

laReservation = new Array();

masi tu ne mets rien dedans

Code:

laReservetion.length

vaut donc 0...

Tu verras que ça va tout de suite mieux en renseignant l'Array:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
 
//Constructeur de l'objet Reservation
function Reservation(leNomClient, leNomHotel, laDateArrivee, leNbJours){
   this.nomClient = leNomClient;
   this.hotel = leNomHotel;
   this.dateArrivee =laDateArrivee;
   this.nbJours = leNbJours;
   }
//On crée un tableau pour les réservations
var laReservation = new Array();
laReservation.push( new Reservation("MATTER", "Central Hotel", "22/03/2005", "2"));
laReservation.push( new Reservation("HEITZ", "Hôtel LA MARMOTTE", "12/03/2005", "3"));
laReservation.push(  new Reservation("MATTER", "Hôtel-Restaurant IVOIRE", "12/04/2005", "2"));
laReservation.push(  new Reservation("DECKER", "Hôtel du PARC", "27/03/2005", "1"));
laReservation.push( new Reservation("EDEL", "Hôtel du PARC", "21/03/2005", "2"));
laReservation.push( new Reservation("MULLER", "Central Hotel", "20/03/2005", "2"));
laReservation.push(  new Reservation("WALTER", "Hôtel-Restaurant IVOIRE", "03/04/2005", "3"));
laReservation.push(  new Reservation("MEYER", "Central Hotel", "29/03/2005", "2"));
laReservation.push(  new Reservation("MOREL", "Hôtel SOLANA", "02/04/2005", "3"));
laReservation.push(  new Reservation("WALTER", "Central Hotel", "16/03/2005", "2"));
 
 
 
//Fonction remplirTab
function remplirTab() {
   leTab = document.getElementById("main");
   nbReservation = laReservation.length;
 
      for (i=0;i<nbReservation;i++) {
	     laLigne = leTab.insertRow(-1); //creation d'une ligne du tableau html
		 laCellule = laLigne.insertCell(-1); //Creation d'une cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].nomClient; //On écrit dans la cellule avec lapropriété innerHTML
		 laCellule = laLigne.insertCell(-1); //Creation d'une 2ième cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].hotel;
	     laCellule = laLigne.insertCell(-1); //Creation d'une 3ième cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].dateArrivee;
	     laCellule = laLigne.insertCell(-1); //Creation d'une 4ième cellule dans une ligne
		 laCellule.innerHTML = laReservation[i].nbJours;
		 }
	  }
 
</script>
</head>
 
<body onload="remplirTab()">
 
<table width="600" cellpadding="0" cellspacing="0" border="2">
<caption align="center" valign="bottom"> tableau des reservations</caption>
<col width="200"> <col width="200"> <col width="200"> <col width="200">
 
<thead></thead>
  <tbody id="main"> 
   <tr>
      <th>nom client</th>
      <th>hotel</th>
      <th>date d'arrivee</th>
      <th>Durée du séjour</th>
   </tr>
  </tbody>  
 
</table>
</body>
 
</html>