\r
table#liste td.detail {\r
background-color: #FFFFFF; \r
- padding: 0px 0px 5px 5px;\r
+ padding: 0px 0px 0px 0px;\r
}\r
\r
table#liste table.detail {\r
+/**\r
+ * Voir : http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko:Introduction#DOM_et_JavaScript\r
+ * et : http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko:element\r
+ */\r
+\r
/**\r
* Callback appelé lorsque un film est clické.\r
* Affiche ou cache les informations détaillés pour ce film.\r
*/\r
function detailFilm(id)\r
{\r
- var detail = document.getElementById(id)\r
+ var detail = document.getElementById("detail"+id)\r
\r
if (detail.style.visibility == "visible")\r
{\r
detail.style.visibility = "visible"\r
detail.style.position = "relative" \r
}\r
+}\r
+\r
+/**\r
+ * Effectue une recherche, n'affiche que les films qui contiennent le motif recherché.\r
+ */\r
+function doRecherche()\r
+{\r
+ var motif = document.getElementById("recherche").value\r
+\r
+ var liste = document.getElementById("liste")\r
+ var lignes = liste.childNodes\r
+ for(i = 0; i < lignes.length; i++)\r
+ {\r
+ var titre = lignes[i].getElements\r
+ \r
+ \r
+ alert(tr[i].id)\r
+ }\r
}
\ No newline at end of file
<xsl:template match="filmographie">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
- <title>yopYop</title>\r
+ <title>DivX</title>\r
<link rel="stylesheet" href="../css/yopyop.css" type="text/css" />\r
<script type="text/javascript" src="../js/yopyop.js" ></script>
</head>
<body>
- <h1>DivX</h1>
+ <h1>DivX</h1><form><input type="text" onkeyup="doRecherche()" id="recherche" /></form>
<table id="liste">
<tr>
<th class="titre">Titre</th>
<xsl:for-each select="film">
<xsl:sort select="annee" order="descending" />\r
<xsl:sort select="titre" />
- <tr>
- <td onclick="detailFilm('{@id}')" class="titre"><xsl:value-of select="titre"/></td>
+ <tr id="ligne{@id}">
+ <td onclick="detailFilm('{@id}')" class="titre" id="titre{@id}"><xsl:value-of select="titre"/></td>
<td class="annee"><xsl:value-of select="annee"/></td>\r
<td class="duree"><xsl:value-of select="duree"/> min</td>\r
<td class="lien"><a href="{url}">GO</a></td>\r
</tr>\r
<tr>\r
<td colspan="5" class="detail">\r
- <table class="detail" id="{@id}">\r
+ <table class="detail" id="detail{@id}">\r
<tr><td class="titreDetail">Genre<xsl:if test="count(genres/genre) > 1">s</xsl:if></td><td><xsl:for-each select="genres/genre"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
<tr><td class="titreDetail">Réalisateur<xsl:if test="count(realisateurs/realisateur) > 1">s</xsl:if></td><td><xsl:for-each select="realisateurs/realisateur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
<tr><td class="titreDetail">Acteur<xsl:if test="count(acteurs/acteur) > 1">s</xsl:if></td><td><xsl:for-each select="acteurs/acteur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r