Events and XSLT

I have written an xml, xsd and a xsl file, and I would like to know how to do the following:

If a user clicks on a certain link, the page displays a certain paragraph. If the user clicks on a different link, the page will display a different paragraph. How is this possible? Thank you.

EDIT:

This is the code. The idea is, if I click on the CountryName in question in the table, I display information about that country, if I click another, it'll show that one. The information will be in ws:CountryName/ws:Information and there will be text and pictures.

XSL:

 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
                 xmlns:ws="http://www.w3schools.com"
                 version="1.0"> 

 <xsl:template match="/">
 <html>
 <body>
 <table border="1">
 <tr bgcolor="red"><th>Country</th></tr>

 <xsl:for-each select="ws:Categorie/ws:Countries/ws:Country">
      <tr><td><xsl:value-of select="ws:CountryName"/></td></tr>
 </xsl:for-each>

 </table>
 </body>
 </html>
 </xsl:template>

 </xsl:stylesheet>

标签： xml events xslt

2条回答

混吃等死

2楼-- · 2019-09-25 07:45

There are pure JS implementations of XSLT which also support events, like Saxon-CE. Might want to give them a try. Actually, their own documentation is implemented using it, and does exactly what you're trying to achieve, so you may want to study that.

0人赞添加讨论(0) 举报

Emotional °昔

3楼-- · 2019-09-25 07:52

Sounds like you wish to have hide/show text linked to the respective countries. The best way to do that is to add links to the country values, which when clicked will run a javascript toggling the hide/show.
For instance:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:ws="http://www.w3schools.com"
    version="1.0">
    <xsl:template match="/">
        <html>
            <head>
                <title>Trial country links</title>
                <script>
                    function hideShow(country){
                        if(document.getElementById(country).style.display == 'none'){
                            document.getElementById(country).style.display = 'block';
                        } else {
                            document.getElementById(country).style.display = 'none';
                        }
                    }
                </script>
            </head>
            <body>
                <table border="1">
                    <tr bgcolor="red">
                        <th>Country</th>
                        <th>Information</th>
                    </tr>
                    <xsl:for-each select="//ws:Categorie/ws:Countries/ws:Country">
                        <tr>
                            <td>
                                <xsl:element name="a">
                                    <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="ws:CountryName"/>')</xsl:attribute>
                                    <xsl:value-of select="ws:CountryName"/>
                                </xsl:element>
                            </td>
                            <td>
                                <xsl:element name="div">
                                    <xsl:attribute name="id"><xsl:value-of select="ws:CountryName"/></xsl:attribute>
                                    <xsl:attribute name="style">display:none;</xsl:attribute>
                                    <xsl:value-of select="ws:Information"/>
                                </xsl:element>
                            </td>
                        </tr>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

When applied to the following input XML

<?xml version="1.0" encoding="UTF-8"?>
<ws:Categorie xmlns:ws="http://www.w3schools.com">
    <ws:Countries>
        <ws:Country>
            <ws:CountryName>Birma</ws:CountryName>
            <ws:Information>Birma blabla</ws:Information>
        </ws:Country>
        <ws:Country>
            <ws:CountryName>India</ws:CountryName>
            <ws:Information>India blabla</ws:Information>
        </ws:Country>
        <ws:Country>
            <ws:CountryName>Boerkina Faso</ws:CountryName>
            <ws:Information>Boerkina Faso blabla</ws:Information>
        </ws:Country>
        <ws:Country>
            <ws:CountryName>Namibia</ws:CountryName>
            <ws:Information>Namibia blabla</ws:Information>
        </ws:Country>
    </ws:Countries>
</ws:Categorie>

This gives

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Trial country links</title>
        <script>
                    function hideShow(country){
                        if(document.getElementById(country).style.display == 'none'){
                            document.getElementById(country).style.display = 'block';
                        } else {
                            document.getElementById(country).style.display = 'none';
                        }
                    }
                </script>
    </head>
    <body>
        <table border="1">
            <tr bgcolor="red">
                <th>Country</th>
                <th>Information</th>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('Birma')">Birma</a></td>
                <td>
                    <div id="Birma" style="display:none;">Birma blabla</div>
                </td>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('India')">India</a></td>
                <td>
                    <div id="India" style="display:none;">India blabla</div>
                </td>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('Boerkina Faso')">Boerkina Faso</a></td>
                <td>
                    <div id="Boerkina Faso" style="display:none;">Boerkina Faso blabla</div>
                </td>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('Namibia')">Namibia</a></td>
                <td>
                    <div id="Namibia" style="display:none;">Namibia blabla</div>
                </td>
            </tr>
        </table>
    </body>
</html>

0人赞添加讨论(0) 举报

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间