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:
Por otro lado tengo un xml de las elecciones:
y su correspondiente hoja de transformación XSL:
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.
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
0