我试图找出如何隐藏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>
答案 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>