Ejercicio DOM + XSL
Publicado por Dani (3 intervenciones) el 24/05/2019 15:02:42
Buenas.
Tengo un proyecto final de clase y estoy atascado.
Tengo que hacer una página web partiendo de un archivo XML, haciendo un XSLT y creando un botón de búsqueda con DOM (Java). El botón debe servir para que cuando busque el título de una película, oculte todas las películas salvo la que he buscado. En la página inicial aparecen todas las películas en una tabla.
ARCHIVO XSLT:
ARCHIVO Java.js:
¿Podéis explicarme cómo hacer que el botón funcione?
Gracias.
Tengo un proyecto final de clase y estoy atascado.
Tengo que hacer una página web partiendo de un archivo XML, haciendo un XSLT y creando un botón de búsqueda con DOM (Java). El botón debe servir para que cuando busque el título de una película, oculte todas las películas salvo la que he buscado. En la página inicial aparecen todas las películas en una tabla.
ARCHIVO XSLT:
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
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<script type="text/javascript" src="java.js">
function buscar() {
var prueba = document.getElementsByClassName("mostra");
for (var u=prueba.length-1; u >= 0; u--) {
prueba[u].setAttribute("class", "oculta");
}var v_parrafos = document.getElementsByTagName("table");
var texto_user = document.getElementById("busqueda").value;
var minus_user = texto_user.toLowerCase();
for (var i = 0; i > v_parrafos.length; i++) {
var copia_parrafo = v_parrafo[i].textContent;
var minus_parrafo = copia.parrafo.toLowerCase();
var comparacion = minus_parrafo.includes(minu_user);
if (comparacion == true) {
v_parrafos[i].setAttribute("class", "mostra");
}}};</script>
</head>
<title>Trabajo DOM</title>
<body>
<h2 style="text-align:center">Peliculas</h2>
<table border="30" id="table">
<tr bgcolor="#8BC3CA">
<th style="text-align:center">Titulo</th>
<th style="text-align:center">Duracion</th>
<th style="text-align:center">Portada</th>
<th style="text-align:center">Genero</th>
</tr>
<xsl:for-each select="films/film">
<tr>
<td id="titulo" style="text-align:center"><xsl:value-of select="titol" /></td>
<td style="text-align:center"><xsl:value-of select="durada"/></td>
<td> <xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="img/@src" />
</xsl:attribute>
</xsl:element>
</td>
<td style="text-align:center"><xsl:value-of select="generes/genere"/></td>
</tr>
</xsl:for-each>
</table>
<div style="text-align:right">
<input type="search" class="" value="busqueda" onclick="buscar();" placeholder="Buscar en el sitio..." />
<button type="submit">Buscar</button>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
ARCHIVO Java.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function buscar() {
var prueba = document.getElementsByClassName("mostra");
for (var u=prueba.length-1; u >= 0; u--) {
prueba[u].setAttribute("class", "oculta");
}var v_parrafos = document.getElementsByTagName("table");
var texto_user = document.getElementById("busqueda").value;
var minus_user = texto_user.toLowerCase();
for (var i = 0; i > v_parrafos.length; i++) {
var copia_parrafo = v_parrafo[i].textContent;
var minus_parrafo = copia.parrafo.toLowerCase();
var comparacion = minus_parrafo.includes(minu_user);
if (comparacion == true) {
v_parrafos[i].setAttribute("class", "mostra");
}}};¿Podéis explicarme cómo hacer que el botón funcione?
Gracias.
Valora esta pregunta
0
