-
Notifications
You must be signed in to change notification settings - Fork 1
/
liste.html
75 lines (67 loc) · 3.3 KB
/
liste.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" /> <!-- aller chercher les fonctions css dans ce fichier -->
<title>Liste</title> <!-- Nom de la page -->
<script src="w3library.js"></script> <!-- aller chercher les fonctions de script dans ce fichier -->
</head>
<body>
<h2>Liste des fromages:</h2> <!-- Texte type h2 en haut de page -->
<p>
<input oninput="w3.filterHTML('#myTable', '.item', this.value)" placeholder="Rechercher un fromage.."> </p>
<!-- création d'une zone de saisie, recherche dans le myTable, texte inscrit si non utiliser -->
<table id="myTable"> <!-- Création d'un tableau - myTable -->
<tr> <!-- 3 colonne dans le tableau -->
<th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Nom des fromages</th>
<!-- Au moment du clique, trier selon l'item 1 -->
<th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Provenance</th>
<!-- Au moment du clique, trier selon l'item 2 -->
<th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(3)')" style="cursor:pointer">Prix pour 100g</th>
<!-- Au moment du clique, trier selon l'item 3 -->
</tr> <!-- Chaque tr est une ligne avec un élément dans le tableau -->
<tr class="item">
<td><a href="fromage/apenzeller.html">Appenzeller</td>
<td><img src="provenance/appenzellri.png" alt="appenzellri.png" width="64" height="64" /></td> <!-- logo de provenance avec la taille -->
<td>        1.80</td> <!--   permet de faire des espace ; mieux centrer ; méthode "moche" -->
</tr>
<tr class="item">
<td><a href="fromage/emmental.html">Emmental</td>
<td><img src="provenance/berne.png" alt="berne.png" width="64" height="64" /></td>
<td>        2.50</td>
</tr>
<tr class="item">
<td><a href="fromage/gruyere.html">Gruyère</td>
<td><img src="provenance/fribourg.png" alt="fribourg.png" width="64" height="64" /></td>
<td>        1.65</td>
</tr>
<tr class="item">
<td><a href="fromage/sbrinz.html">Sbrinz</td>
<td><img src="provenance/berne.png" alt="berne.png" width="64" height="64" /></td>
<td>        2.30</td>
</tr>
<tr class="item">
<td><a href="fromage/tete-de-moine.html">Tête-de-moine</td>
<td><img src="provenance/berne.png" alt="berne.png" width="64" height="64" /></td>
<td>        2.10</td>
</tr>
<tr class="item">
<td><a href="fromage/formagella.html">Formagella</td>
<td><img src="provenance/tessin.png" alt="tessin.png" width="64" height="64" /></td>
<td>        1.95</td>
</tr>
<tr class="item">
<td><a href="fromage/vacherin.html">Vacherin</td>
<td><img src="provenance/fribourg.png" alt="fribourg.png" width="64" height="64" /></td>
<td>        1.90</td>
</tr>
<tr class="item">
<td><a href="fromage/raclette.html">Raclette</td>
<td><img src="provenance/valais.png" alt="valais.png" width="64" height="64" /></td>
<td>        2.50</td>
</tr>
</table>
</body>
</html>
</body>
</html>