SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    showing two tables by clicking a link desinating two tables

    Code:
    <script type=text/javascript>
    function hide()
    {
      xGetElementsByClassName('xTables', document, 'table',
        function(ele) {
          ele.style.display = "none";
        }
      );
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display = "block";
    }
    // xGetElementsByClassName, Copyright 2002-2006 Michael Foster (Cross-Browser.com)
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    function xGetElementsByClassName(c,p,t,f)
    {
      var found = new Array();
      var re = new RegExp('\\b'+c+'\\b', 'i');
    //  var list = xGetElementsByTagName(t, p); // use this if you want IE4+ support
      var list = p.getElementsByTagName(t);
      for (var i = 0; i < list.length; ++i) {
        if (list[i].className && list[i].className.search(re) != -1) {
          found[found.length] = list[i];
          if (f) f(list[i]);
        }
      }
      return found;
    }
    </script>
    
    <a href="javascript:change('xTable2');">link2</a>
    <a href="javascript:change('xTable3');">link3</a>
    <a href="javascript:change('xTable7');">link7</a><br>
    
    <table id='xTable2' class='xTables' style="display:block">
    <tr><td>table2</td></tr>
    </table>
    
    <table id='xTable3' class='xTables' style='display: none'>
    <tr><td>table3</td></tr>
    </table>
    
    <table id='xTable7' class='xTables' style='display: none'>
    <tr><td>table7</td></tr>
    </table>
    The code above makes each table shown by clicking the link above, taking turn.

    It works fine.
    But I like to make it not only each tables shown by clicking the link above, two tables shown by clicking some of the links.


    The following would-be code doesn't work correctly, but it will show what I want.

    Code:
    would-be code
    
    <script type=text/javascript>
    
    .......
    
    </script>
    
    <a href="javascript:change('xTable2');">link2</a>
    <a href="javascript:change('xTable3');">link3</a>
    <a href="javascript:change('xTable7');">link7</a><br>
    
    <table id='xTable2' class='xTables' style="display:block">
    <tr><td>table2</td></tr>
    </table>
    
    <table id='xTable3' class='xTables' style='display: none'>
    <tr><td>table3-1</td></tr>
    </table>
    
    <table id='xTable7' class='xTables' style='display: none'>
    <tr><td>table7</td></tr>
    </table>
    
    <table id='xTable3' class='xTables' style='display: none'>
    <tr><td>table3-2</td></tr>
    </table>
    Link2 and and Link7 desinates a table each, but Link3 desinates two tables.

    When it's uploading, table2 will be shown.
    If the link3 is clicked, table3-1 and table 3-2 will be shown.
    If the link7 is clicked, table7 will be shown.



    Although I can make two tables shown with clicking a link by put two tables in a table(hidden/shown) with the javascript above, I like to make two tables which are apart from one another shown.

    Can I make it with your help?
    Last edited by dotJoon; Oct 31, 2006 at 21:56.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi joon,

    All elements must have unique IDs. No two elements can have the same ID. So give them numbered IDs as you were, and use this:
    Code:
    // Pass any number of IDs
    function change()
    {
      hide();
      for (var i = 0; i < arguments.length; ++i) {
        try {
          document.getElementById(arguments[i]).style.display = "table";
        }
        catch (e) {  
          document.getElementById(arguments[i]).style.display = "block";
        }  
      }
    }
    And call it like this:

    change('xTable3', 'xTable4');

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you again, MikeFoster. It works fine.


Bookmarks

Posting Permissions

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