我想在下拉列表中显示带有所选月份值的表格,首先我隐藏了表格,用javascript中的函数显示了表格,现在我不知道如何只显示相关信息到这个月。 xsl代码中可以有if语句吗?谢谢。
书籍.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>
书籍.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
事件 - 向
option
元素添加value
属性 - 添加了按月识别书籍的类(class)
- 使用 JavaScript 按类隐藏和显示项目
关于javascript - 如何根据属性值在表中显示信息 (XML-XSLT),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15450254/