如何隐藏和;在xslt中显示html表的行

时间:2013-04-21 07:49:09

标签: html xml xslt

我试图找出如何隐藏xslt样式表中的行。我已经创建了一个XSLT样式表,显示每一行都是可用的...但是我想这样,当加载xml时,一些行被隐藏了。

这就是xslt(xml样式表)的样子。

<?xml version="1.0" encoding="ISO-8859-1"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/Catalogue">
     <html>
     <body>
        <xsl:for-each select="Tales">
        <xsl:if test="Talent != ''">
            <table border="0" width="550">
                <tr>
                    <td bgcolor="#A0A0A0" width="80%"><b><xsl:value-of select="Tale"/></b></td>
                    <td bgcolor="#A0A0A0" width="20%" align="center"><xsl:value-of select="Cost"/>
                    <xsl:text>  -  </xsl:text>
                    <xsl:value-of select="Type"/></td>
                 </tr>
                <tr>
                <xsl:if test="Prereq != ''">
                    <td colspan="2" bgcolor="#C0C0C0"><xsl:value-of select="Prereq"/></td>
                </xsl:if>   
                </tr>
                <tr>
                <xsl:if test="Action != ''">
                    <td colspan="2" bgcolor="#E0E0E0"><xsl:value-of select="Action"/></td>
                </xsl:if>
                </tr>
                <tr>
                <xsl:if test="Description != ''">
                    <td colspan="2" bgcolor="#EBEBEB"><xsl:value-of select="Description"/></td>
                </xsl:if>
                </tr>
            </table>
               <br/>  <br/>
        </xsl:if>
     </xsl:for-each>
     </body>
     </html>
    </xsl:template>
    </xsl:stylesheet>

我想知道如何在页面打开时隐藏Prereq,Action和description的表格的行,然后按一个按钮或+链接显示这些行..然后再次点击隐藏。

我看过一些教程是用javascript完成的,但是一旦我尝试添加这段代码,xml数据就不再显示了。

非常感谢任何帮助。

更新:这就是xml的样子

<?xml version="1.0"?>
    <?xml-stylesheet href="bloodandguts.xsl" type="text/xsl"?>
<Catalogue>
<Tales>
<Talent>Training</Talent>
<Cost>1</Cost>
<Type>Any</Type>
<Prereq></Prereq>
<Action>Passive</Action>
<Description>Confers proficiency of a single type of training</Description>
</Tales>
// then lots more <Tales></Tales>
</Catalogue>

更新:

这是我添加到我的xslt中的方式......但由于某种原因,它阻止我的xml文件显示任何内容

<?xml version="1.0" encoding="ISO-8859-1"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <script type ="text/javascript" src="jquery.js" ></script>
    <xsl:template match="/Catalogue">
     <html>
     <body>

1 个答案:

答案 0 :(得分:1)

只是为了给你一些点击以继续,或澄清你的问题。

在您的示例中添加一些javascript应该没问题。例如,即使没有必要使用这样一个简单的例子,我也会使用jQuery。

  • 如有必要,请在html <header>中添加javascript库:

           <script type ="text/javascript" src="jquery.js" ></script>
    
  • 在您要隐藏的行中添加ID或类,稍后再显示。

    <tr id="test1" style="display:none">
    
  • 在标题行中添加onclick处理程序。

    <td bgcolor="#A0A0A0" width="80%">
        <div onclick="$('#test1').show()">+</div>
        <b>
            <xsl:value-of select="Tale"/>
        </b>
    </td>
    

请注意,这只显示如何将javascript(jquery)添加到您的示例中。这只会显示一个隐藏的行,并且只能使用一个<Tales>条目,因为html中的id应该是唯一的。因此,您可以从xslt创建唯一ID,或者向您的动态行添加一个类,并从您的javascript处理程序中搜索它们。

更新

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/Catalogue">
        <html>
            <header>
            <script type ="text/javascript" src="jquery.js" ></script>
            </header>
            <body>
                <xsl:for-each select="Tales">
                    <xsl:if test="Talent != ''">
                        <table border="0" width="550">
                            <tr>
        <td bgcolor="#A0A0A0" width="80%">
            <div onclick="$('#test1').show()">+</div>
            <b>
                <xsl:value-of select="Tale"/>
            </b>
        </td>
                                <td bgcolor="#A0A0A0" width="20%" align="center">
                                    <xsl:value-of select="Cost"/>
                                    <xsl:text>  -  </xsl:text>
                                    <xsl:value-of select="Type"/>
                                </td>
                            </tr>
                            <tr >
                                <xsl:if test="Prereq != ''">
                                    <td colspan="2" bgcolor="#C0C0C0">
                                        <xsl:value-of select="Prereq"/>
                                    </td>
                                </xsl:if>
                            </tr>
                            <tr id="test1" style="display:none">
                                <xsl:if test="Action != ''">
                                    <td colspan="2" bgcolor="#E0E0E0">
                                        <xsl:value-of select="Action"/>
                                    </td>
                                </xsl:if>
                            </tr>
                            <tr>
                                <xsl:if test="Description != ''">
                                    <td colspan="2" bgcolor="#EBEBEB">
                                        <xsl:value-of select="Description"/>
                                    </td>
                                </xsl:if>
                            </tr>
                        </table>
                        <br/>
                        <br/>
                    </xsl:if>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>