javascript - Toggle visibility of a table element HTML through a button -
i writing xsl file transforms piece of xml html , contains snippet of javascript code use toggle visibility of table element html click on button. don't need use style @ moment.
here 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 if 'groupid' node value 'no'--> <detail1> here text detail 1 </detail1> <detail2> here text detail 2 </detail2> </dependency> <dependency> <artifactid>eclipse</artifactid> <groupid>yes</groupid></dependency> </lists> my xsl is:
<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> the result xsl below:
how can change xsl default one?
![enter image description here][2] and when expanding, getting one?
![enter image description here][3]
if requirement make table collapsed default on page load, add below table tag (with id=tb):
style="display:none;"
Comments
Post a Comment