0

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、および説明を保持するテーブルの行を非表示にする方法を知りたいのですが、ボタンまたは+リンクを押してそれらの行を表示します..再度クリックすると非表示になります。

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

1 に答える 1

1

続行するため、または質問を明確にするために、いくつかのヒットを与えるためだけに.

サンプルに JavaScript を追加しても問題ありません。たとえば、このような簡単な例では必要がなくても、jQuery を使用します。

  • <header>必要に応じて、HTML に 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) を例に追加する方法のみを示していることに注意してください。これは非表示の行のみを表示し、1 つの <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>
于 2013-04-21T09:32:27.930 に答える