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> |
tableau dynamique qui n'affiche rien
Répondre avec citation
)
Partager