Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggling Visibility

    How can I use javascript to toggle the visibility of a whole column of a table?
    For example, I click a link on the top of the page, and the column is shown or becomes invisible, and this works for every column, with a different link to click on.

    Thanks!

    Edit: I've found a way to do it, but I'm not sure it's the 'best' way...

    Code:
    <script type="text/javascript">
    <!--
    
    function toggle_visibility(id) {
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++){
    if (alltags[i].className==id)
    {
    	if(alltags[i].style.display == 'none')
    	alltags[i].style.display = '';
    	else
    	alltags[i].style.display = 'none';
    }
    }
    }
    //-->
    </script>
    I am using that toggle function on links, like so:
    Code:
    <b><a href="#" onclick="toggle_visibility('dummy1');">Dummy 1</a></b>
    Then, On each table cell, I have a div that has the class 'dummy1', like this:
    Code:
    <tr>
    <td><div class="dummy1">Dummy 1</div></td>
    <td><div class="dummy2">Dummy 2</div></td>
    <td><div class="dummy3">Dummy 3</div></td>
    <td><div class="dummy4">Dummy 4</div></td>
    </tr>
    Is there an easier way of doing it by column, and not by table cell?

    Thanks!
    Last edited by Zegg90; 12-23-2006 at 11:28 PM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    The correct method of doing this is to use the CSS2 visibility: collapse declaration on a col or colgroup element. Unfortunately, Internet Explorer doesn’t support it and Opera only supports it superficially. Firefox does support it, but it seems to have an issue refreshing alignment of cell content.

    Here’s an example that that collapses the second column when you click the table and shows the column again when you click the table once more. Of course, you’ll only see the effect in Firefox. Note that the table header doesn’t align correctly when the column is collapsed; I believe that that’s a Firefox bug.

    Edit: For reference, the Firefox issue is Bug 354846.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Author" content="Patrick Garies"/>
        <title>CF 103629 Demo</title>
    
        <style type="text/css">
          table {
            margin: 0 auto;
            table-layout: fixed;
            text-align: center;
            font-family: Verdana, sans-serif;
            }
          col {
            width: 200px;
            }
          col.collapse {
            visibility: collapse;
            }
          th, td {
            border: 1px solid;
            padding: 0.5em;
            }
        </style>
    
        <script type="text/javascript">
          document.defaultView.addEventListener("load", function() {
            document.getElementsByTagName("table")[0].addEventListener("click", function() {
              var column = document.getElementsByTagName("col")[1];
              if (document.defaultView.getComputedStyle(column, "").visibility == "visible") column.className = "collapse";
              else column.className = "";
              }, false);
            }, false);
        </script>
    
      </head>
      <body>
    
        <table xml:lang="ja" lang="ja">
          <col/>
          <col/>
          <col/>
          <tr>
            <th colspan="3">Rōmaji <span xml:lang="en" lang="en">Numbers</span></th>
          </tr>
          <tr>
            <td>ichi</td>
            <td>ni</td>
            <td>san</td>
          </tr>
          <tr>
            <td>shi</td>
            <td>go</td>
            <td>roku</td>
          </tr>
          <tr>
            <td>shichi</td>
            <td>hachi</td>
            <td>kyū</td>
          </tr>
        </table>
    
      </body>
    </html>
    Last edited by Arbitrator; 12-24-2006 at 12:39 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •