Show Hide table data


/ Published in: JavaScript
Save to your folder(s)

Show Hide table data uses href, anchors, div tags, and javascript to toggle between showing and hiding a table on the html page.


Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2. <!--
  3. function switchView(obj) {
  4. var el = document.getElementById(obj);
  5. if ( el.style.display != "none" ) {
  6. el.style.display = 'none';
  7. }
  8. else {
  9. el.style.display = '';
  10. }
  11. }
  12. //-->
  13. </script>
  14.  
  15.  
  16. <table>
  17. <tr>
  18. <td width="30%" align="right" valign="top"><a href="##GotoMyControlName" onClick="switchView('MyControlName'); return false;">My Heading Text:</a></td>
  19. <td width="1%">&nbsp;</td>
  20. <td>
  21. <!-- BEGIN section of page that will toggle between show/hide by clicking link in cell above. -->
  22. <div id="MyControlName" style="display:none">
  23. <table border="0" cellpadding="3" cellspacing="0" >
  24. <tr >
  25. <td><span class="cPreReq">MyOUTPUTgoesHere</span>&nbsp;</td>
  26. </tr>
  27. </table>
  28. </div>
  29. <!-- END section of page that will toggle between show/hide -->
  30. </td>
  31. </tr>
  32.  
  33. </table>

URL: http://www.codekeep.net/JavaScript/code/snippets/20287/Show-Hide-table-data/view.aspx

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.