通过按钮切换表格元素HTML的可见性

时间:2013-07-25 10:38:46

标签: javascript xml xslt

我正在编写一个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结果如下:

enter image description here

如何将我的XSL更改为默认获取?

![enter image description here][2]

当扩展时,得到这个?

![enter image description here][3]

2 个答案:

答案 0 :(得分:0)

如果您的要求是在页面加载时默认折叠表格,请将以下内容添加到您的表格标签中(ID = tb):

style="display:none;"

答案 1 :(得分:0)

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+") 

试一试