我想在下拉列表中显示所选月份的值的表,首先我有表隐藏,用javascript中的函数我显示表,现在我不知道如何显示相对于这个月的信息。可以在XSL代码中使用if语句吗?感谢。
books.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="tabla.xsl"?>
<TotalBooks>
<books month= "January">
<book>
<isbn> 1 </isbn>
<tittle>The tittle</tittleo>
<author>Me</author>
</book>
<book>
<isbn> 2 </isbn>
<tittle>The tittle two</tittleo>
<author>Me</author>
</book>
</books>
</TotalBooks>
books.xsl
<html>
<head>
<script>
function TryOption()
{
tabla.style.visibility="visible";
}
</script>
</head>
<body>
<h1>My books</h1>
<div>
<label> Sales/ month: </label>
<select>
<option> </option>
<xsl:for-each select="TotalBooks/books">
<option onclick="TryOption();">
<xsl:value-of select="@month"/>
</option>
</xsl:for-each>
</select>
</div>
<div>
<table id="tabla">
<tr bgcolor="skyblue">
<th align="left">Tittle</th>
<th align="left">Author</th>
</tr>
<xsl:for-each select="TotalBooks/books/book">
<tr>
<td>
<xsl:value-of select="tittle"/>
</td>
<td>
<xsl:value-of select="author"/>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</body>
</html>
请尝试一下:
<?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" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
function TryOption(value)
{
$('.book').hide();
if(value != '') {
$('.' + value).show();
}
}
</script>
<style>
.book { display: none; }
</style>
</head>
<body>
<h1>My books</h1>
<div>
<label> Sales/ month: </label>
<select onchange="TryOption(this.value);">
<option> </option>
<xsl:apply-templates select="TotalBooks/books" />
</select>
</div>
<div>
<table id="tabla">
<tr bgcolor="skyblue">
<th align="left">Tittle</th>
<th align="left">Author</th>
</tr>
<xsl:apply-templates select="TotalBooks/books/book" />
</table>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="books">
<option value="{@month}">
<xsl:value-of select="@month"/>
</option>
</xsl:template>
<xsl:template match="book">
<tr class="book {../@month}">
<td>
<xsl:value-of select="tittle"/>
</td>
<td>
<xsl:value-of select="author"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
要点:
- 将事件处理程序移动到
select
的onchange
事件 -
value
属性添加到option
元素 - 增加按月识别图书的类
- 使用JavaScript隐藏和显示项目的类
要获得工作代码,您需要做几件事:
步骤1 -修复XML文件
您的<title
>标签以</titleo>
关闭,这显然是错误的。
步骤2 -修复XSLT文件
添加XSLT文档声明,其格式如下:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
<xsl:output method="xml" indent="yes" />
<xsl:template match="/">
<html>
<!-- Rest of the stylesheet may be here -->
</html>
</xsl:template>
</xsl:stylesheet>
步骤3 -重新考虑你的代码
你的代码有几个问题:
- 您计划创建一个包含所有月份的行的大表。这是可以做到的,但稍后在JS中处理会更加困难。只显示/隐藏一个表比单独显示/隐藏每一行更容易。
- 您在
<option
>上使用onclick
。我建议在<select>
上使用onchange
。
步骤4 -添加更多数据到XML文件
这将让您以更明显的方式测试代码。只需复制一月的<books>
,并将月份名称更改为二月。
步骤5 -修复XSLT
请查找下面的代码作为示例。这段代码还远远不够完整,但它为您指明了方向。请参考我的内联注释。
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
<xsl:output method="xml" indent="yes" />
<xsl:template match="/">
<html>
<head>
<script>
/* <select> is a parameter */
function TryOption(select)
{
/* get the name of the selected month */
var month = select.options[select.selectedIndex].value;
/* show the table corresponding to this month */
document.getElementById('table-'+month).style.display="block";
/* you should also hide other tables - it's not done here */
}
</script>
</head>
<body>
<h1>My books</h1>
<div>
<label> Sales/ month: </label>
<!-- 'onchange' event here -->
<select onchange="TryOption(this)">
<option></option>
<xsl:for-each select="TotalBooks/books">
<!-- each <option> has a 'value' attribute with the name of th month
On example:
<option value="January">January</option> -->
<option>
<xsl:attribute name="value"><xsl:value-of select="@month"/></xsl:attribute>
<xsl:value-of select="@month"/>
</option>
</xsl:for-each>
</select>
</div>
<div>
<!-- For each <books> tag (which represents one month) create new table.
Table's id = 'table'+month, on example 'table-January'.
Each table is hidden by default. -->
<xsl:for-each select="TotalBooks/books">
<table style="display: none">
<xsl:attribute name="id">table-<xsl:value-of select="@month"/></xsl:attribute>
<tr bgcolor="skyblue">
<th align="left">Tittle</th>
<th align="left">Author</th>
</tr>
<!-- For each book in the given month, list those.
This 'for-each' only loops over books from one month,
because this loop is inside another loop -->
<xsl:for-each select="book">
<tr>
<td><xsl:value-of select="tittle"/></td>
<td><xsl:value-of select="author"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>