Web Analytics Made Easy - StatCounter Showing/Hiding Table rows - CodingForum

Announcement

Collapse
No announcement yet.

Showing/Hiding Table rows

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Showing/Hiding Table rows

    Hey guys. I'm in need of some help here. I am building a table that initially has a few hidded rows. I have menu links to click on that will make these rows visible to display a menu. So every hidded row has a link that will show it. I have this part working so far, but what I can't figure out is how to only show one row from the table at a time. As of right now, I can unhide many rows and they will all show simultaneously. I want to set it so that if a row is already visible when another link is clicked, it will first hide the visible row, then open the hidden one. Here is the code I am using to display and hide row:

    <script type=\"text/javascript\">
    function showhide(row)
    {
    if(document.all[row].style.display == 'none')
    {
    document.all[row].style.display ='';
    }
    else{ document.all[row].style.display ='none'; }
    return false;
    }
    </script>


    -------------------------------------------------------
    Here is the code for the table elements:
    -------------------------------------------------------
    <table class=\"tbl01\">
    <tr id=\"approve\" style=\"display:none\">
    <td class=\"td12\" align=\"center\">SOME STUFF HERE...</td>
    </tr>
    <tr id=\"add\" style=\"display:none\">
    <td class=\"td12\" align=\"center\">OTHER STUFF HERE...</td>
    </tr>
    <tr id=\"edit\" style=\"display:none\">
    <td class=\"td12\" align=\"center\">EVEN MORE STUFF...</td>
    </tr>
    </tabl>


    -------------------------------------------------------
    Then I use these links to show/hide rows:
    -------------------------------------------------------

    <a class=\"link08\" onClick=\"showhide('approve'); return false;\" href=\"\">Link1</a>

    <a class=\"link08\" onClick=\"showhide('add'); return false;\" href=\"\">Link2</a>

    <a class=\"link08\" onClick=\"showhide('edit'); return false;\" href=\"\">Link3</a>


    The above code allows me to make all three hidden rows visible at the same time. How can I get it to only show one row at a time? Please let me know if you have any advice. Thanks!
    Tags: None
  • #2
    If I understand you correctly. You wish to show one row and when displaying another, hide the first one so only one row is visible at a time?

    Try this:
    Code:
    <script type="text/javascript">
  function showhide(num){
   var rows = 3; // Number of rows to show/hide //;
    for(i=1; i<=rows; i++){
     which = document.getElementById('row'+i);
      if(num == i){which.style.display = 'block'};
       else{which.style.display = 'none'};
    }
   }
</script>
</HEAD>

<BODY>
<table class="tbl01">
<tr id="row1" style="display:none">
<td class="td12" align="center">APPROVE STUFF HERE...</td>
</tr>
<tr id="row2" style="display:none">
<td class="td12" align="center">ADD STUFF HERE...</td>
</tr>
<tr id="row3" style="display:none">
<td class="td12" align="center">EDIT STUFF HERE...</td>
</tr>
</table>


<a class="link08" onClick="showhide(1); return false;" href="#">Approve</a>
<a class="link08" onClick="showhide(2); return false;" href="#">Add</a>
<a class="link08" onClick="showhide(3); return false;" href="#">Edit</a>
    .....Willy
    Last edited by Willy Duitt; Feb 14, 2004, 08:51 AM.

    Comment

    • #3
      Thanks for the reply. That got me much closer to my goal, but still one thing missing with it. When you click the link it opens like they should, but if you click it twice, it doesn't hide again. It should be able to open and close. Please let me know if you have any more suggestions. Thanks for the help so far.

      Comment

      • #4
        Maybe table is not the right thing to use with your data and that is what makes things more complicated than they should be. If you posted a link to the page you are working on....
        Vladdy | KL
        "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

        Comment

        • #5
          Okay, I will post a link to show you. I have it almost the way i want it now, except that it doesn't collapse if you click on a link twice. If you want to see what I'm working with, go here:

          http://204.212.238.17/All-Around%20S...1.0/sample.php

          You can see where I'm using it if you click on either 3 of the links: Approve Items, Add Items, or Edit Items. I am building a WebLink system, and this is going to be part of the men. Let me know if you got any better suggestions.

          Thanks!

          Comment

          • #6
            First, it does not work in Gecko browsers.
            Second, LIST of links is not tabular data.
            Third, why not do a conventional drop down on hover?
            Vladdy | KL
            "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

            Comment

            • #7
              Try this:
              Code:
              <script type="text/javascript">
  function showhide(num){
   var rows = 3; // Number of rows to show/hide //;
    for(i=1; i<=rows; i++){
     which = document.getElementById('row'+i);
      if(num == i){
        [color=red]which.style.display = (which.style.display=='block') ? 'none':'block';[/color]
      }
       else{which.style.display = 'none'};
    }
   }
</script>
</HEAD>

<BODY>
<table class="tbl01">
<tr id="row1" style="display:none">
<td class="td12" align="center">APPROVE STUFF HERE...</td>
</tr>
<tr id="row2" style="display:none">
<td class="td12" align="center">ADD STUFF HERE...</td>
</tr>
<tr id="row3" style="display:none">
<td class="td12" align="center">EDIT STUFF HERE...</td>
</tr>
</table>


<a class="link08" onClick="showhide(1); return false;" href="#">Approve</a>
<a class="link08" onClick="showhide(2); return false;" href="#">Add</a>
<a class="link08" onClick="showhide(3); return false;" href="#">Edit</a>
              .....Willy

              Comment

              • #8
                That works like a charm! Thanks for all your help, I really appreciate it. If you ever want a free copy of the software when I'm done writing it, just let me know. I think it looks a little better like this than with a traditional dropdown menu.

                Comment

                • #9
                  Does not in Gecko
                  Vladdy | KL
                  "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

                  Comment

                  • #10
                    What is Gecko?

                    Comment

                    • #11
                      Gecko is the rendering engine developed by Mozilla. It's used in the Mozilla browser, in Mozilla FireFox, in Camino, in Galeon, in K-Melon, in IBM Web Browser for OS/2, in Netscape 6, in Netscape 7, in Aphrodite, in DocZilla, in Compuserve 7, in Beonex, in AOL for Mac OS X. It's also used in several non-browser projects.
                      liorean <[[email protected]]>
                      Articles: RegEx evolt wsabstract , Named Arguments
                      Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
                      Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

                      Comment

                      • #12
                        Well, is there a code equivilent that will work with Gecko?

                        Comment

                        • #13
                          It uses the CSS2 value 'table-row' instead of the CSS1 value 'block' for table formatting. You should be able to set it to whatever the default value is by setting it to an empty string instead of either 'block' or 'table-row', though, but you'd have to test it in a few browsers to make sure.
                          liorean <[[email protected]]>
                          Articles: RegEx evolt wsabstract , Named Arguments
                          Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
                          Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

                          Comment

                          Previous template Next
                          Working...
                          X