<BasePeriod>
.
.
.
.
<Period>
<start> stdate1 </start>
<end> endate1 </end>
<subperiod>
<substart> substart1 </substart>
<subend> subend1 </subend>
</subperiod>
<type> abc1 </type>
</Period>
<Period>
<start> stdate1 </start>
<end> endate1 </end>
<subperiod>
<substart> substart2 </substart>
<subend> subend2 </subend>
</subperiod>
<type> abc2 </type>
</Period>
<Period>
<start> stdate1 </start>
<end> endate1 </end>
<subperiod>
<substart> substart3 </substart>
<subend> subend3 </subend>
</subperiod>
<type> abc3 </type>
</Period>
</BasePeriod>
我想做的是 – 当我打开html时,将Period和SubPeriod折叠,然后在我点击它时展开它们.
我有以下xslt:
<xsl:for-each select="SvcPeriods/BasePeriod">
<tr>
<td>
<xsl:value-of select="startDate"/>
</td>
<td>
<xsl:value-of select="endDate"/>
</td>
<td>
<a href="javascript:expandIt(per_expand{position()}), period_expand{position()}" name="period_expand{position()}" class="expandit">Periods</a>
<div id="per_expand{position()}" style="display:none;" >
<table>
<thead>
<tr>
<th>
Start Date
</th>
<th>
End Date
</th>
<th>
Sub Periods
</th>
<th>
Type
</th>
</tr>
</thead>
<xsl:for-each select="Period">
<tr>
<td>
<xsl:value-of select="start"/>
</td>
<td>
<xsl:value-of select="end"/>
</td>
<td>
<a href="javascript:expandIt(subper_expand{position()}), subperiod_expand{position()}" name="subperiod_expand{position()}" class="expandit">Sub Periods</a>
<div id="subper_expand{position()}" style="display:none;" >
<table>
<tr>
<th >
Start Date
</th>
<th >
End Date
</th>
</tr>
<xsl:for-each select="subperiod">
<tr>
<td>
<xsl:value-of select="substart"/>
</td>
<td>
<xsl:value-of select="subend"/>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</td>
<td>
<xsl:value-of select="type"/>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</td>
</tr>
</xsl:for-each>
<script language="JavaScript">
function expandIt(whichEl, link) {
whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
if ( link ) {
if ( link.innerHTML ) {
if ( whichEl.style.display == "none" ) {
link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
} else {
link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
}
}
}
}
</script>
有了上述内容,我无法扩展子时期.然后我尝试将document.getElementById(subper_expand {position()}’)作为expandit函数的第一个参数传递.这次我能够扩展子时段,但问题是,它总是指第一个时期的子时段(即使我在第二个或第三个时段内点击).
有人可以帮助我吗?
谢谢!
解决方法:
将您的XSL分解为多个模板
最好使用许多模板,而不是使用“隐藏”< xsl:for-each>元素.
BasePeriod:
<xsl:template match="SvcPeriods/BasePeriod">
<tr>
<td>
<xsl:value-of select="startDate"/>
</td>
<td>
<xsl:value-of select="endDate"/>
</td>
<td>
<a href="javascript:expandIt(per_expand{position()},
per_expand{position()})"
name="period_expand{position()}" class="expandit">Periods</a>
<div id="per_expand{position()}" style="display:none;">
<table>
<tr>
<th> Start Date </th>
<th> End Date </th>
<th> Sub Periods </th>
<th> Type </th>
</tr>
<xsl:apply-templates select="Period"/>
</table>
</div>
</td>
</tr>
<xsl:call-template name="expandIt"/>
</xsl:template>
期:
<xsl:template match="Period">
<tr>
<td>
<xsl:value-of select="start"/>
</td>
<td>
<xsl:value-of select="end"/>
</td>
<td>
<a href="javascript:expandIt(subper_expand{position()},
subperiod_expand{position()})"
name="subperiod_expand{position()}"
class="expandit">Sub Periods</a>
<div id="subper_expand{position()}" style="display:none;">
<table>
<tr>
<th> Start Date </th>
<th> End Date </th>
</tr>
<xsl:apply-templates select="subperiod"/>
</table>
</div>
</td>
<td>
<xsl:value-of select="type"/>
</td>
</tr>
</xsl:template>
亚纪:
<xsl:template match="subperiod">
<tr>
<td>
<xsl:value-of select="substart"/>
</td>
<td>
<xsl:value-of select="subend"/>
</td>
</tr>
</xsl:template>
expandIt:
<xsl:template name="expandIt">
<script language="JavaScript">
function expandIt(whichEl, link) {
whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
if ( link ) {
if ( link.innerHTML ) {
if ( whichEl.style.display == "none" ) {
link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
} else {
link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
}
}
}
}
</script>
</xsl:template>
如你所见,我改变了:
<a href="javascript:expandIt(subper_expand{position()}),
subperiod_expand{position()}"
至:
<a href="javascript:expandIt(subper_expand{position()},
subperiod_expand{position()})"
(per_expand也一样).结果(使用Opera):
下一步(单击“期间”链接):
下一步(点击子期间):
似乎没问题,按预期扩展和折叠工作.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。