通過按鈕切換表格元素HTML的可見性

我在寫一個XSL文件，它將一段XML轉換爲HTML，幷包含一段JavaScript代碼，我用它通過點擊切換表格元素HTML的可見性在一個按鈕上。我目前不需要使用風格。通過按鈕切換表格元素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]

來源

2013-07-25 new

只是爲了檢查，在表格中使用內聯樣式設置顯示塊，代碼爲'document.getElementById（tbid）.style.display = （document.getElementById（tbid）.style.display ==「block 「）？「none」：「block」;'足以查看顯示是否切換 – rps

對不起，我不明白你說的是什麼。請你能告訴我究竟是什麼，在哪裏必須替換爲可見性功能以及我必須要做的事情？謝謝 – new

我已經發布了一個答案，運行它，看看它是否工作！考慮到你的答案，這部分代碼變成

rps

回答

如果您的要求是要在默認情況下在頁面加載倒塌的表，下面添加到您的表標籤（與ID = TB）：

style="display:none;"

來源

2013-07-25 11:06:35 Harry

width =「100％」border =「1」cellpadding =「4」cellspacing =「0」id =「tb」name =「tb」>

\t \t \t \t

。問題在於按鈕的[+] Expand「值沒有切換。事實上，這個按鈕上的點擊事件沒有反應。謝謝 – new

你是否在控制檯中發現錯誤？我發現，即使您在上面的評論中發佈的代碼也能正常工作。 – Harry

太棒了！非常感謝你。 – new

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

試試

來源

2013-07-25 11:34:31 rps

通過按鈕切換表格元素HTML的可見性

回答

相關問題