无法使用href链接使用xslt文件在xml中展开结果

时间:2012-04-01 12:24:21

标签: xml xslt xslt-1.0 xslt-2.0

我为xml的房屋名称列表视图设计了一个xslt文件。当从列表中单击房屋名称时,它应显示房屋的完整详细信息,该房屋位于同一个xml文件中。但就我而言,它正在重定向到另一个地方。有人能帮助我吗?

<Houses>
    <search>
        <id>1</id>
        <name>horror</name>
        <address>09, west Road</address>
        <city>London</city>
        <pcode>se4 7jk</pcode>
        <contact>020574110832</contact>
        </search>
</Houses>

xslt文件的问题部分

<xsl:template match="name">
     <xsl:attribute name="href">
     <xsl:value-of select="//search/name"/>
     </xsl:attribute>
</xsl:template>

1 个答案:

答案 0 :(得分:0)

我假设您希望添加每个名称的链接。在这种情况下,你需要像

这样的东西
<xsl:template match="name">
    <a>
        <xsl:attribute name="href">
            <xsl:text>#</xsl:text><xsl:value-of select="."/>
        </xsl:attribute>
        <xsl:value-of select="."/>
    </a>
</xsl:template>

这将创建<a href="#horror">horror</a>

等元素

修改

这里是一个带有div元素的表的示例,通过单击按钮可以折叠/展开。我留给你的好布局;它只是作为如何使用xslt创建html的示例,包括javascript toggle hide / show。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>

    <xsl:template match="/">
        <html>
            <head>
                <title>trial</title>
                <script type="text/javascript" language="javascript">
                    //expand and collapse functions based on id
                    function toggleById(IdStart) {
                    var divs = document.getElementsByTagName('div');
                    for (var i=0<xsl:text>;</xsl:text> i&lt;divs.length<xsl:text>;</xsl:text> i++) {
                    if (divs[i].id.match("^"+IdStart) == IdStart) { 
                        if( divs[i].style.display == "none")
                            {
                            divs[i].style.display = "block"
                            }
                        else    {
                            divs[i].style.display = "none"
                            }
                    }
                    }
                    return true;
                    }

                </script>
            </head>
            <body>
                <table border="solid black 1pt;" style="border-collapse:collapse;padding:0;border-spacing:0">
                    <tr>
                        <th>house name</th>
                        <th>details</th>
                    </tr>
                    <xsl:apply-templates/>
                </table>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="name">
        <tr>
            <td>
                <input>
                    <xsl:attribute name="type">button</xsl:attribute>
                    <xsl:attribute name="onclick">toggleById('<xsl:value-of select="."/>'); return true;</xsl:attribute>
                    <xsl:attribute name="onMouseOver">this.style.cursor='hand'</xsl:attribute>
                    <xsl:attribute name="value"><xsl:value-of select="."/></xsl:attribute>
                </input>
            </td>
            <td>
                <div>
                    <xsl:attribute name="id"><xsl:value-of select="."/></xsl:attribute>
                    <xsl:attribute name="style">display:none</xsl:attribute>
                    <xsl:copy-of select=".."/>
                </div>
            </td>
        </tr>
    </xsl:template>

    <xsl:template match="text()"/>

</xsl:stylesheet>

适用于

<?xml version="1.0" encoding="UTF-8"?>
<Houses>
    <search>
        <id>1</id>
        <name>horror</name>
        <address>09, west Road</address>
        <city>London</city>
        <pcode>se4 7jk</pcode>
        <contact>020574110832</contact>
    </search>
    <search>
        <id>2</id>
        <name>nice</name>
        <address>05, East Road</address>
        <city>London</city>
        <pcode>po4 3df</pcode>
        <contact>none</contact>
    </search>
</Houses>

这给出了

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>trial</title>
        <script type="text/javascript" language="javascript">
                    //expand and collapse functions based on id
                    function toggleById(IdStart) {
                    var divs = document.getElementsByTagName('div');
                    for (var i=0; i<divs.length; i++) {
                    if (divs[i].id.match("^"+IdStart) == IdStart) { 
                        if( divs[i].style.display == "none")
                            {
                            divs[i].style.display = "block"
                            }
                        else    {
                            divs[i].style.display = "none"
                            }
                    }
                    }
                    return true;
                    }

                </script>
    </head>
    <body>
        <table border="solid black 1pt;" style="border-collapse:collapse;padding:0;border-spacing:0">
            <tr>
                <th>house name</th>
                <th>details</th>
            </tr>
            <tr>
                <td><input type="button" onclick="toggleById('horror'); return true;" onMouseOver="this.style.cursor='hand'" value="horror"></td>
                <td>
                    <div id="horror" style="display:none">
                        <search>
                            <id>1</id>
                            <name>horror</name>
                            <address>09, west Road</address>
                            <city>London</city>
                            <pcode>se4 7jk</pcode>
                            <contact>020574110832</contact>
                        </search>
                    </div>
                </td>
            </tr>
            <tr>
                <td><input type="button" onclick="toggleById('nice'); return true;" onMouseOver="this.style.cursor='hand'" value="nice"></td>
                <td>
                    <div id="nice" style="display:none">
                        <search>
                            <id>2</id>
                            <name>nice</name>
                            <address>05, East Road</address>
                            <city>London</city>
                            <pcode>po4 3df</pcode>
                            <contact>none</contact>
                        </search>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

在浏览器中试用,您将体验到展开/折叠行为。