SitePoint Sponsor

User Tag List

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

    creating new xTables without modifying javascript

    Code:
    exchange Table
    
    <script type=text/javascript>
    function hide()
    {
    document.getElementById('xTable1').style.display="none"; 
    document.getElementById('xTable2').style.display="none";
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display="block";
    }
    </script>
    <table>
      <tr>
        <td>
    <a href="javascript:change('xTable1');">table1</a>
        </td>
        <td>
    <a href="javascript:change('xTable2');">table2</a>
        </td>
      </tr>
      <tr>
        <td colspan='2'>
          <table id='xTable1' style="display:block">
            <tr><td>table1</td></tr>
          </table>
          <table id='xTable2'  style='display: none'>
            <tr><td>table2</td></tr>
          </table>
        </td>
      <tr>
    </table>
    The code above can select the table shown.
    If a user clicks the link table1, it shows table1.(Table2 is not shown.)
    If the user clicks the link table2, it shows table2.(Table1 is not shown.)
    It works fine, and It is powerful.


    But I want more poweful.
    I like to add xTable more.

    If I add the code below in the javascript, it will work.
    Code:
     
    document.getElementById('xTable3').style.display = "none";
    document.getElementById('xTable4').style.display = "none";
    In order to make the repetition simple, the code can be modified like the following.

    Code:
    before modified
    
    document.getElementById('xTable1').style.display="none"; 
    document.getElementById('xTable2').style.display="none";
    document.getElementById('xTable3').style.display="none"; 
    document.getElementById('xTable4').style.display="none";
    
    after modified
    
    for(c=1;c<=4;c++) 
    {
    document.getElementById('xTable'+c).style.display='none';
    }
    The modified code above is more powerful than before modified code because I can simply change the number of the table instead of writing "document.getElementById('xTable5').style.display="none";" for adding a new xTable.


    Now I like to tell what is my problem.
    My problem is that I like not to change the javascript when I add a new xTable.


    Look at the below code.
    Code:
    fold Table
    
    <script type=text/javascript>
    function group(id)
    {
      var objTableGroup = document.getElementById('fTable'+id);   
      if(objTableGroup.style.display == 'block' || objTableGroup.style.display == '') 
      {
    objTableGroup.style.display = 'none';
      }
      else
      {
    objTableGroup.style.display = 'block';
      }
    }
    </script>
    
    <a href="javascript:group('1')" class='bold'>group1</a>
    
    <table id='fTable1' style='display: none'>
    <tr>
    <td>table1</td>
    </tr>
    </table>
    
    <br>
    
    <a href="javascript:group('2')" class='bold'>group2</a>
    
    <table id='fTable2' style='display: none'>
    <tr>
    <td>table2</td>
    </tr>
    </table>
    The code above can fold fTable by clicking the link.

    There are two groups of fTable in the code.

    If I want to add more group of fTable, I add fTable without modifying javascript.

    It means that I can add a new fTable without modifying the javascript code.

    Can I make the exchange Table code to add a new xTable without modifying the javascript code like the fTable with your help?

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

    Code:
    would-be xTable code
    
    <script type=text/javascript>
    function hide(id)
    {
    document.getElementById('xTable1'+id).style.display="none"; 
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display="block";
    }
    </script>

  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,

    Try this...
    Code:
    function hide()
    {
      var i = 1, tbl;
      while ((tbl = document.getElementById('xTable' + i++)) != null) {
        tbl.style.display = "none"; 
      }
    }

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type=text/javascript>
    function hide()
    {
      var i = 1, tbl;
      while (
    (tbl = document.getElementById('xTable' + i++)) != null) 
    {
        tbl.style.display = "none"; 
      }
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display="block";
    }
    </script>
    <table>
    <tr>
    <td><a href="javascript:change('xTable1');">link1</a></td>
    <td><a href="javascript:change('xTable2');">link2</a></td>
    </tr>
    <tr>
    <td colspan='2'>
    <table id='xTable1' style="display:block">
    <tr><td>table1</td></tr>
    </table>
    <table id='xTable2' style='display: none'>
    <tr><td>table2</td></tr>
    </table>
    </td>
    <tr>
    </table>
    Thank you, MikeFoster.

    It works fine with the code above.
    But it doesn't work with the code below.
    Code:
    <script type=text/javascript>
    function hide()
    {
      var i = 1, tbl;
      while (
    (tbl = document.getElementById('xTable' + i++)) != null) 
    {
        tbl.style.display = "none"; 
      }
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display = "block";
    }
    </script>
    <table>
    <tr>
    <td><a href="javascript:change('xTable2');">link1</a></td>
    <td><a href="javascript:change('xTable3');">link2</a></td>
    </tr>
    <tr>
    <td colspan='2'>
    <table id='xTable2' style="display:block">
    <tr><td>table1</td></tr>
    </table>
    <table id='xTable3' style='display: none'>
    <tr><td>table2</td></tr>
    </table>
    </td>
    <tr>
    </table>
    I like to make the code with any xTableNumber work because the table code will be made someone who doesn't care of the xTableNumber instead of me.

    Is it possible with your help?

  4. #4
    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)
    Give them all the same class name and use xGetElementsByClassName. It requires xGetElementsByTagName.

    For example:
    Code:
    function hide()
    {
      xGetElementsByClassName('myTableClass', document, 'table',
        function(ele) {
          ele.style.display = "none";
        }
      );
    }

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Code:
    function hide()
    {
      xGetElementsByClassName('myTableClass', document, 'table',
        function(ele) {
          ele.style.display = "none";
        }
      );
    }
    Thank you for your suggestion.
    I think my ability can't follow your suggestion.


    The following is one of my trial codes.
    But it seems not to work.

    Code:
    trial code1
    
    <script type=text/javascript>
    function hide()
    {
      xGetElementsByClassName('myTableClass', document, 'xTable',
        function(ele) {
          ele.style.display = "none";
        }
      );
    }
    function change(tablediv)
    {
    hide();
    document.getElementById(tablediv).style.display = "block";
    }
    </script>
    
    <table>
    <tr>
    <td><a href="javascript:change('xTable1');">link1</a></td>
    <td><a href="javascript:change('xTable2');">link2</a></td>
    </tr>
    <tr>
    <td colspan='2'>
    <table id='xTable1' style="display:block">
    <tr><td>table1</td></tr>
    </table>
    <table id='xTable2' style='display: none'>
    <tr><td>table2</td></tr>
    </table>
    </td>
    <tr>
    </table>

    Am I on the wrong track?

  6. #6
    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)
    Note the class names on the tables (xTables).
    Code:
    <html>
    <head>
    <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>
    </head>
    <body>
    <table>
    <tr>
    <td><a href="javascript:change('xTable2');">link1</a></td>
    <td><a href="javascript:change('xTable3');">link2</a></td>
    <td><a href="javascript:change('xTable7');">link3</a></td>
    </tr>
    <tr>
    <td colspan='3'>
    <table id='xTable2' class='xTables' style="display:block">
    <tr><td>table1</td></tr>
    </table>
    <table id='xTable3' class='xTables' style='display: none'>
    <tr><td>table2</td></tr>
    </table>
    <table id='xTable7' class='xTables' style='display: none'>
    <tr><td>table3</td></tr>
    </table>
    </td>
    <tr>
    </table>
    </body>
    </html>

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,209
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you. Thank you very much.


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
  •