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



我为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>

我假设您希望为每个名称添加一个链接。在这种情况下,您将需要类似的东西

<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元素的表的例子,通过单击按钮可以折叠/展开div元素。我留给你的布局不错;这只是一个如何使用xslt创建html的示例,包括javascript切换隐藏/显示。

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

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

相关内容

  • 没有找到相关文章

最新更新