我为xml中的房屋名称列表视图设计了一个xslt文件。当从列表中单击房屋名称时,它应该显示同一xml文件中房屋的全部细节。但就我而言,它正在转向另一个地方。有人能帮我吗?
<Houses>
<search>
<id>1</id>
<name>horror</name>
<address>09, west Road</address>
<city>London</city>
<pcode>se4 7jk</pcode>
<contact>020574110832</contact>
</search>
</Houses>
xslt文件的问题部分
<xsl:template match="name">
<xsl:attribute name="href">
<xsl:value-of select="//search/name"/>
</xsl:attribute>
</xsl:template>
我假设您希望为每个名称添加一个链接。在这种情况下,您将需要类似的东西
<xsl:template match="name">
<a>
<xsl:attribute name="href">
<xsl:text>#</xsl:text><xsl:value-of select="."/>
</xsl:attribute>
<xsl:value-of select="."/>
</a>
</xsl:template>
这将创建类似<a href="#horror">horror</a>
的元素
编辑
好的,这里有一个带有div元素的表的例子,通过单击按钮可以折叠/展开div元素。我留给你的布局不错;这只是一个如何使用xslt创建html的示例,包括javascript切换隐藏/显示。
<?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" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>trial</title>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleById(IdStart) {
var divs = document.getElementsByTagName('div');
for (var i=0<xsl:text>;</xsl:text> i<divs.length<xsl:text>;</xsl:text> i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
if( divs[i].style.display == "none")
{
divs[i].style.display = "block"
}
else {
divs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<table border="solid black 1pt;" style="border-collapse:collapse;padding:0;border-spacing:0">
<tr>
<th>house name</th>
<th>details</th>
</tr>
<xsl:apply-templates/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="name">
<tr>
<td>
<input>
<xsl:attribute name="type">button</xsl:attribute>
<xsl:attribute name="onclick">toggleById('<xsl:value-of select="."/>'); return true;</xsl:attribute>
<xsl:attribute name="onMouseOver">this.style.cursor='hand'</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="."/></xsl:attribute>
</input>
</td>
<td>
<div>
<xsl:attribute name="id"><xsl:value-of select="."/></xsl:attribute>
<xsl:attribute name="style">display:none</xsl:attribute>
<xsl:copy-of select=".."/>
</div>
</td>
</tr>
</xsl:template>
<xsl:template match="text()"/>
</xsl:stylesheet>
应用于时
<?xml version="1.0" encoding="UTF-8"?>
<Houses>
<search>
<id>1</id>
<name>horror</name>
<address>09, west Road</address>
<city>London</city>
<pcode>se4 7jk</pcode>
<contact>020574110832</contact>
</search>
<search>
<id>2</id>
<name>nice</name>
<address>05, East Road</address>
<city>London</city>
<pcode>po4 3df</pcode>
<contact>none</contact>
</search>
</Houses>
这提供
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>trial</title>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleById(IdStart) {
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
if( divs[i].style.display == "none")
{
divs[i].style.display = "block"
}
else {
divs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<table border="solid black 1pt;" style="border-collapse:collapse;padding:0;border-spacing:0">
<tr>
<th>house name</th>
<th>details</th>
</tr>
<tr>
<td><input type="button" onclick="toggleById('horror'); return true;" onMouseOver="this.style.cursor='hand'" value="horror"></td>
<td>
<div id="horror" style="display:none">
<search>
<id>1</id>
<name>horror</name>
<address>09, west Road</address>
<city>London</city>
<pcode>se4 7jk</pcode>
<contact>020574110832</contact>
</search>
</div>
</td>
</tr>
<tr>
<td><input type="button" onclick="toggleById('nice'); return true;" onMouseOver="this.style.cursor='hand'" value="nice"></td>
<td>
<div id="nice" style="display:none">
<search>
<id>2</id>
<name>nice</name>
<address>05, East Road</address>
<city>London</city>
<pcode>po4 3df</pcode>
<contact>none</contact>
</search>
</div>
</td>
</tr>
</table>
</body>
</html>
在浏览器中试用它,您将体验到展开/折叠行为。