HTML - Insertar tranformación de XML con XSL en un HTML

   
Vista:

Insertar tranformación de XML con XSL en un HTML

Publicado por Katherine (1 intervención) el 13/06/2015 15:43:40
Buenos días.

estoy intentando hacer una página con el siguiente código:

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
<html>
<head>
<meta charset='UTF-8' />
<title>Elecciones</title>
<link rel='stylesheet' href='index.css' />
<script type='text/javascript' src='index.js'></script>
 
</head>
<body onload='getxml(xml)'>
 
 
<h1><div>Elecciones Cangas 2015</div></h1>
 
<span>Partidos Candidatos: </span>
 
<div class='contenedor'>
 
<div class='partido' ><img src="logo1.jpg" alt="partido"></div>
<div class='partido' ><img src="logo2.png" alt="partido"></div>
<div class='partido' ><img src="logo3.png" alt="partido"></div>
<div class='partido' ><img src="logo4.jpg" alt="partido"></div>
 
</div>
 
<div id='detalle'>
</div>
</body>
</html>

Por otro lado tengo un xml de las elecciones:

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
<?xml version="1.0" encoding="utf-8"?>
 
<?xml-stylesheet type="text/xsl" href="elecciones.xsl"?>
<elecciones>
<localidad>Cangas City</localidad>
<censo>4000</censo>
<votos_emitidos>2500</votos_emitidos>
<votos_validos>2300</votos_validos>
 
<partidos_candidatos>
<partido logo="logo1.jpg">
<nome>Rojos</nome>
<numero_votos>150</numero_votos>
<representantes>
<concelleiro foto="foto1.jpg">
<nome>fulanito</nome>
<edad>33</edad>
<observaciones></observaciones>
</concelleiro>
<concelleiro foto="foto1.png">
<nome>fulanita</nome>
<edad>29</edad>
<observaciones></observaciones>
</concelleiro>
</representantes>
</partido>
 
<partido logo="logo2.png">
<nome>Azules</nome>
<numero_votos>15</numero_votos>
<representantes>
<concelleiro foto="foto1.jpg">
<nome>fulanito2</nome>
<edad>33</edad>
<observaciones></observaciones>
</concelleiro>
<concelleiro foto="foto1.jpg">
<nome>fulanita2</nome>
<edad>29</edad>
<observaciones></observaciones>
</concelleiro>
</representantes>
</partido>
 
<partido logo="logo3.png">
<nome>Verdes</nome>
<numero_votos>1000</numero_votos>
<representantes>
<concelleiro foto="foto1.jpg">
<nome>fulanito2</nome>
<edad>33</edad>
<observaciones></observaciones>
</concelleiro>
<concelleiro foto="foto1.jpg">
<nome>fulanita2</nome>
<edad>29</edad>
<observaciones></observaciones>
</concelleiro>
</representantes>
</partido>
 
<partido logo="logo4.jpg">
<nome>Marrones</nome>
<numero_votos>500</numero_votos>
<representantes>
<concelleiro foto="foto1.jpg">
<nome>fulanito2</nome>
<edad>33</edad>
<observaciones></observaciones>
</concelleiro>
<concelleiro foto="foto1.jpg">
<nome>fulanita2</nome>
<edad>29</edad>
<observaciones></observaciones>
</concelleiro>
</representantes>
</partido>
 
 
</partidos_candidatos>
</elecciones>

y su correspondiente hoja de transformación XSL:

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
<?xml version="1.0"?>
 
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
 
 
<xsl:template match='/'>
 
<html>
<head>
<meta charset='UTF-8' />
<title>Elecciones</title>
<link rel='stylesheet' href='elecciones.css' />
<script type='text/javascript' src='elecciones.js'></script>
 
</head>
<body>
 
 
 
<div class='partido'>
<div class='logo'><img><xsl:attribute name='src'><xsl:value-of select='elecciones/partidos_candidatos/partido/@logo'/></xsl:attribute></img></div><div>PARTIDO <xsl:value-of select='elecciones/partidos_candidatos/partido/nome'/></div>
</div>
 
<div class='informacion'>
<span>Número de votos:<xsl:value-of select='elecciones/partidos_candidatos/partido/numero_votos'/></span><br/>
<span>Número de Concelleiros:<xsl:value-of select='count(elecciones/partidos_candidatos/partido/representantes/concelleiro)'/></span><br/>
<span>Localidad:<xsl:value-of select='elecciones/localidad'/></span><br/>
</div>
 
<div class='titulo'>LISTA DE CONCELLEIROS PARA EL PARTIDO <xsl:value-of select='elecciones/partidos_candidatos/partido/nome'/></div>
 
 
<div class='contenedor'>
 
<xsl:for-each select='elecciones/partidos_candidatos/partido/representantes/concelleiro'>
<div class='concelleiro'> <span>Nombre: <xsl:value-of select='nome'/></span><br/><span>Edad:<xsl:value-of select='edad'/></span><br/><span>Observaciones:<xsl:value-of select='observaciones'/></span><br/>
<div><img><xsl:attribute name='src'><xsl:value-of select='@foto'/></xsl:attribute></img></div>
 
</div>
</xsl:for-each>
 
</div>
 
</div>
</body>
</html>
 
</xsl:template >
 
</xsl:stylesheet>

Mi idea es que en la página principal, al hacer click sobre el div de alguno de los partidos, me aparezca en el div con id "detalle" la tranformación del xml sólo del partido al que he hecho click. No sé muy bien como hacerlo con javascript, os agradecería que me echaráis una mano. He buscado y googleado por sitios, pero lo único que he encontrado son transformaciones del xml entero, no de un nodo en concreto. No sé si me explico muy bien.. Espero que podáis ayudarme.

Un saludo y gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder