Foros del Web » Programando para Internet » Javascript »

Insertar tranformación de XML con XSL en un HTML

Estas en el tema de Insertar tranformación de XML con XSL en un HTML en el foro de Javascript en Foros del Web. Buenos días. estoy intentando hacer una página con el siguiente código: <html> <head> <meta charset='UTF-8' /> <title>Elecciones</title> <link rel='stylesheet' href='index.css' /> <script type='text/javascript' src='index.js'></script> </head> ...
  #1 (permalink)  
Antiguo 13/06/2015, 04:18
 
Fecha de Ingreso: junio-2015
Ubicación: Cangas do Morrazo
Mensajes: 2
Antigüedad: 9 años, 6 meses
Puntos: 0
Insertar tranformación de XML con XSL en un HTML

Buenos días.

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

<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:

<?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:

<?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.

Etiquetas: html, javascript+html, xml, xsl
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:35.