[英]Toggle visibility of a table element HTML through a button
我正在編寫一個XSL文件,該文件將一段XML轉換為HTML,其中包含一小段JavaScript代碼,我可以通過單擊按鈕來切換表格元素HTML的可見性。 我現在不需要使用樣式。
這是我的XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type='text/xsl' href='myXSL.xsl'?>
<LISTS>
<SCR>repository</SCR>
<Dependency><ArtifactId>maven</ArtifactId>
<GroupId>NO</GroupId>
<!--two tags details appear only if the 'GroupId' node value is 'NO'-->
<detail1>
Here is a text detail 1
</detail1>
<detail2>
Here is a text detail 2
</detail2>
</Dependency>
<Dependency>
<ArtifactId>eclipse</ArtifactId>
<GroupId>YES</GroupId></Dependency>
</LISTS>
我的XSL是:
<xsl:template match = "/">
<html>
<head>
<script type="text/javascript">
function toggle(p1,p2)
{
if(document.all){document.getElementById(p1).style.display =
document.getElementById(p1).style.display == "block" ? "none" : "block";}
else{document.getElementById(p1).style.display =
document.getElementById(p1).style.display == "table" ? "none" : "table";}
document.getElementById(p2).value =
document.getElementById(p2).value == "[-] Detruire" ? "[+] Construire" : "[-] Detruire";
}
</script>
</head>
<BODY>
<table>
<xsl:for-each select="LISTS/Dependency">
<xsl:call-template name="myTemplate"/>
</xsl:for-each>
</table>
</BODY>
</html>
</xsl:template>
<!-- called template-->
<xsl:template name="myTemplate">
<tr>
<xsl:choose>
<xsl:when test="GroupId='YES'">
<tr>
<td><xsl:value-of select="ArtifactId"/></td>
<td>OK</td>
</tr>
</xsl:when>
<xsl:when test="GroupId='NO'">
<tr>
<td><xsl:value-of select="ArtifactId"/></td>
<td align="right">KO<input id="mylnk" type="button"
value="[+] Construire" onclick="toggle('tb','mylnk');"/></td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellpadding="4"
cellspacing="0" id="tb" name="tb">
<tr>
<td><xsl:value-of select="detail1"/></td>
<td><xsl:value-of select="detail2"/></td>
</tr>
</table>
</td>
</tr>
</xsl:when>
</xsl:choose>
</tr>
</xsl:template>
</xsl:stylesheet>
我使用XSL獲得的結果如下:
如何更改我的XSL以使其默認為該代碼?
![enter image description here][2]
當擴展時,得到這個嗎?
![enter image description here][3]
如果您的要求是默認情況下使表格在頁面加載時折疊起來,則將以下內容添加到表格標簽中(ID = tb):
style="display:none;"
function visibility(tbid,lnkid)
{
document.getElementById(tbid).style.display =(document.getElementById(tbid).style.display == "block") ? "none" : "block";
document.getElementById(lnkid).value =(document.getElementById(lnkid).value == "[-] Collapse") ? "[+] Expand" : "[-] Collapse";
}
</script>
<table width="100%" id="tb" name="tb" style="display:block">
還給出格式...
getElementById("+tbid+")
嘗試一下
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.